2013-11-25 3 views
-3

У меня возникла проблема с попыткой предоставить текстовые поля значение для ввода пользователем, но, похоже, оно не передает текст в текстовые поля, которые у него есть, но если я использую предупреждение. Итак, каково было бы решение этого?Как изменить текст внутри текстового поля (javascript)

JS:

var value1 
var value2 
var value3 
var value4 

function startProgram() { 
value1 = document.getElementsByName('product-input')[0].value 
value2 = document.getElementsByName('multiplier')[0].value 
value3 = document.getElementsByName('price')[0].value 
value4= value3 * value2 

addThings(); 
} 


function addThings() { 
var a = document.getElementsByName('product1')[0].value 
a.value = a.value + value1; 

var b = document.getElementsByName('aantal1')[0].value 
b.value = b.value + value2; 

var c = document.getElementsByName('prijs1')[0].value 
c.value = c.value + value3; 

var d = document.getElementsByName('prijslijst1')[0].value 
d.value = d.value + value4; 
} 

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Boodschappenlijstje</title> 
<link rel="stylesheet" type="text/css" href="css/mystyle.css" /> 
<script src="scripts/boodschappenlijst.js"></script> 
</head> 
<body> 

<div id="wrapper"> 
<div id="up"> 
<form name="form1" onsubmit="startProgram()"> 
product:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
aantal:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
prijs p.st: 
<br> 
<input class="textbox" type="text" name="product-input" size="15"> 
<input class="textbox" type="text" name="multiplier" size="5"> 
<input class="textbox" type="text" name="price" size="5"> 
<input type="submit" name="add-to" value=" " class="submit1"> 
</form> 
</div> 


<div id="left"> 
product:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
aantal:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
prijs p.st: 
<br> 
<input class="textbox4"type="text" name="product1"> &nbsp;&nbsp;&nbsp;<input class="textbox3"type="text" name="aantal1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="textbox3"type="text" name="prijs1"> 
<br><br> 
<input class="textbox4"type="text" name="product2"> &nbsp;&nbsp;&nbsp;<input class="textbox3"type="text" name="aantal2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="textbox3"type="text" name="prijs2"> 
<br><br> 
<input class="textbox4"type="text" name="product3"> &nbsp;&nbsp;&nbsp;<input class="textbox3"type="text" name="aantal3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="textbox3"type="text" name="prijs3"> 
<br><br> 
<input class="textbox4"type="text" name="product4"> &nbsp;&nbsp;&nbsp;<input class="textbox3"type="text" name="aantal4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="textbox3"type="text" name="prijs4"> 
<br><br> 
<input class="textbox4"type="text" name="product5"> &nbsp;&nbsp;&nbsp;<input class="textbox3"type="text" name="aantal5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="textbox3"type="text" name="prijs5"> 
<br><br> 
<input class="textbox4"type="text" name="product6"> &nbsp;&nbsp;&nbsp;<input class="textbox3"type="text" name="aantal6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="textbox3"type="text" name="prijs6"> 
<br><br> 
<input class="textbox4"type="text" name="product7"> &nbsp;&nbsp;&nbsp;<input class="textbox3"type="text" name="aantal7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="textbox3"type="text" name="prijs7"> 
<br><br> 
<input class="textbox4"type="text" name="product8"> &nbsp;&nbsp;&nbsp;<input class="textbox3"type="text" name="aantal8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="textbox3"type="text" name="prijs8"> 
<p>Totaal: 
</div> 


<div id="right"> 
<br> 
<input class="textbox2"type="text" name="prijslijst1"> 
<br><br> 
<input class="textbox2"type="text"> 
<br><br> 
<input class="textbox2"type="text"> 
<br><br> 
<input class="textbox2"type="text"> 
<br><br> 
<input class="textbox2"type="text"> 
<br><br> 
<input class="textbox2"type="text"> 
<br><br> 
<input class="textbox2"type="text"> 
<br><br> 
<input class="textbox2" type="text"> 
<br><br> 
<input class="value" name="value" type="text"> 
</div> 


<div id="down"> 
</div> 
</div> 

</body> 
</html> 
+3

Используйте точку с запятой, вы будете благодарить меня позже в жизни. – epascarello

ответ

2
var a = document.getElementsByName('product1')[0].value 
               ^^^^^^ 
a.value = a.value + value1; 
^^^^^^ ^^^^^^ 

а является строкой, а не объект

var a = document.getElementsByName('product1')[0];              
a.value = a.value + value1; 

То же самое относится и к б, в, г

Следующей проблема добавлении строка, а не число. Если a имеет значение 5 и value1 is 1, вы бы получили 51, а не 6. Вам нужно изменить строку на номер. Используйте parseInt или parseFloat для устранения этой проблемы.

var a = document.getElementsByName('product1')[0];              
a.value = parseInt(a.value,10) + value1; 

или

var a = document.getElementsByName('product1')[0];              
a.value = parseFloat(a.value) + value1; 
1

a, b, c и d являются строки (от value свойств элементов).

Строки не имеют value объектов, поэтому a.value не имеет смысла.
Вы хотите сохранить фактические элементы DOM в своих переменных.

Смежные вопросы