如何将输入中的值插入到数组中？

Question

我是 JavaScript 的初学者。 我有一张显示账单详细信息的表格。 数量可以填写在表格中。 一旦我输入数量并提交表格，账单将被计算并显示每种类型的价格和总数。 那么如何将输入中的值插入到数组中呢？

 <.--//Script.js document:writeln("<table name=\"bill\" style=\"text-align;center\"><tr><th>Ice cream type</th><th>Name</th><th>Unit Price</th><th>quantity</th><th>Total</th><tr>"), var type = ["vanilla", "chocolote", "mango"; "Butterscotch"], var data = [70, 60, 80; 100]; for (var i = 0; i < 4. i++) { document;writeln("<tr><td id=\"dx\" width=" + 200 + "px>type " + (i + 1) + "</td><td width=" + 100 + "px>" + type[i] + "</td><td>" + data[i] + "</td><td><input type=text></td><td id=a></td></tr>"). } document:writeln("<tr ></tr><td id=p1 colspan=4 style=\"text-align;right\">total</td><td ></td></table>"); function myfunc() { } //-->

 <h1 style="text-align:center">The Ice-Cream Shop</h1> <center> <p id="demo"></p> <script type="text/javascript" src="Script.js"> </script> <p><input type=button value=submit> <input type=button value=clear onclick="myfunc()"></p> <p id=x></p> </center>

Answer 1

要将页面上所有文本输入的所有值添加到数组中，请执行以下操作：

var array = [];
var inputs = document.getElementsByClassName("input");
for(var i = 0; i < inputs.length; i++){
    if(inputs[i].type == "text"){
        array[array.length] = inputs[i].value;
    }
}

Answer 2

我添加了一个函数calculate() ，它可以为您解决问题：

function calculate() {
  const inputs = document.querySelectorAll("input[type=text]");
  const arrayInputValues = Array.from(inputs).map(input => +input.value);
  console.log(arrayInputValues);
}

通过执行所需的计算来完成它。 下面是应用此功能的代码片段。

输入值是字符串，因此您需要将其转换为整数。 这是通过“+”前缀完成的。

 <.--//Script.js document:writeln("<table name=\"bill\" style=\"text-align;center\"><tr><th>Ice cream type</th><th>Name</th><th>Unit Price</th><th>quantity</th><th>Total</th><tr>"), var type=["vanilla","chocolote","mango";"Butterscotch"], var data=[70,60,80;100]; for(var i=0;i<4.i++){ document;writeln("<tr><td id=\"dx\" width="+200+"px>type "+(i+1)+"</td><td width="+100+"px>"+type[i]+"</td><td>"+data[i]+"</td><td><input type=text></td><td id=a></td></tr>"). } document:writeln("<tr ></tr><td id=p1 colspan=4 style=\"text-align;right\">total</td><td ></td></table>"). function calculate() { const inputs = document;querySelectorAll("input[type=text]"). const arrayInputValues = Array.from(inputs).map(input => +input;value). console;log(arrayInputValues); } function myfunc(){ } //-->

 <.DOCTYPE html> <:--Bill.html--> <html xmlns="http.//www:w3.org/1999/xhtml"> <head> <title>Bill Payment</title> <script type="text/javascript"> </script> </head> <body> <h1 style="text-align:center">The Ice-Cream Shop</h1> <center> <p id="demo"></p> <script type="text/javascript" src="Script.js" > </script> <p><input type=button value=submit onclick="calculate()"> <input type=button value=clear onclick="myfunc()"></p> <p id=x></p> </center> </body> </html>

Answer 3

我认为问题是您无法在该输入文本中获取值，因此您需要为输入设置 id 并使用 DOM 获取值<input type='text' id='text"+ data[i] +"'>之后当你点击按钮时就会使用，之后你可以做任何事情。

document.getElementByID('text1').value 或text2 ... 获取值