2013-11-25 53 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; 

这同样适用于B,C,d

接下来的问题是要添加字符串,而不是数字。如果a的值为5value1的值为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

abc,和d(从元件的value属性)。

字符串没有value属性,所以a.value是没有意义的。
您想要将实际的DOM元素存储在您的变量中。