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

【问题标题】：How to insert values from an input into an array?如何将输入中的值插入到数组中？
【发布时间】：2020-03-26 03:53:24
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript html arrays forms input

【解决方案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;
    }
}

【讨论】：

【解决方案2】：

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

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

通过执行所需的计算来完成它。以下是应用此功能的代码 sn-p。

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

<!--//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>

【讨论】：

【解决方案3】：

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

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

【讨论】：