Question

我有一个问题，试图给文本框一个用户输入的值，但它似乎没有将文本传递给它确实具有值的文本框，但如果我使用警报。那么解决这个问题的方法是什么？

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>

Answer 1

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

a是字符串，而不是对象

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

同样适用于b，c，d

下一个问题是你要添加字符串，而不是数字。如果a的值为5而value1的值为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;

Answer 2

a，b，c和d是字符串（来自元素的value属性）。

字符串没有value属性，因此a.value毫无意义您希望将实际DOM元素存储在变量中。

如何更改文本框中的文本（javascript）

2 个答案: