javascript 中用户输入的字段总和

Question

我是编写代码和学习的新手。 我正在尝试从字段中的用户输入中添加数字。 我已使用另一个对该站点的回复作为具有 3 个字段的模板。 但是，我不仅需要添加几个字段，还需要添加许多字段（超过 30 个）。 我想知道是否有一种方法可以用另一种方法简化代码。 我试图避免多次输入 getelementbyID 。 感谢您的帮助和指导。

Html部分

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Asset-sum</title>
</head>
<body>
<fieldset>
                <h2>Total assets</h2>

                <p class='a'> <label for='A'>A</label>
                    <input type="number" name="A" id="A" oninput="ass()" placeholder="0"> &euro;<br>
 
                <p class='a'> <label for='B'>B</label>
                    <input type="number" name="B" id="B" oninput="ass()" placeholder="0" min="0">&euro;<br>
                </p>
                <p class='a'> <label for='C'>C</label>
                    <input type='number' name='C' id='C' oninput="ass()" min='0' placeholder="0"> &euro;<br>
                </p>             
            </fieldset>
   <h2>Your total assets are: </h2><output type="number" id="asset" name="asset"> &euro;
            <br>
</body>
</html>

Javascript部分

function ass() {
  var x = document.getElementById('A').value || 0; // default value 0 if input is blank
  var y = document.getElementById('B').value || 0; // default value 0 if input is blank
  var z = document.getElementById('C').value || 0; // default value 0 if input is blank
  var asset = document.getElementById('asset');
  var myResult = parseInt(x, 10) + parseInt(y, 10) + parseInt(z, 10); // parse it here 
  asset.value = myResult;

}

Answer 1

您可以使用 document.querySelectorAll('input') 获取多个 html 元素并将其存储在变量中。 您可以调用您的 function 并遍历这些元素并访问他的值。 尝试这个：

<input type="number" name="A" id="A" oninput="f()" placeholder="0"> &euro;<br>
<input type="number" name="B" id="B" oninput="f()" placeholder="0" min="0">&euro;<br>

 let elements = document.querySelectorAll("input"); console.log(elements); f = () => { for (let i = 0; i < elements.length; i++){ console.log(elements[i].value) } }

Answer 2

您可以为所有总和字段指定一个 class 名称，然后使用document.getElementsByClassName获取所有字段：

 function ass() { var inputs = document.getElementsByClassName('calculation-input') var myResult = 0 for (let i = 0; i < inputs.length; i++) { myResult += parseInt(inputs[i].value || 0, 10) } var asset = document.getElementById("asset"); asset.value = myResult; }

 <p class="a"> <label for="A">A</label> <input type="number" class="calculation-input" name="A" id="A" oninput="ass()" placeholder="0" /> &euro;<br /> </p> <p class="a"> <label for="B">B</label> <input type="number" class="calculation-input" name="B" id="B" oninput="ass()" placeholder="0" min="0" />&euro;<br /> </p> <p class="a"> <label for="C">C</label> <input type="number" class="calculation-input" name="C" id="C" oninput="ass()" min="0" placeholder="0" /> &euro;<br /> </p> <h2>Your total assets are: </h2><output type="number" id="asset" name="asset"></output> &euro;

Answer 3

您可以在不更改现有代码的情况下执行以下操作：

let arrayOfInputValues = document.getElementByClassName('a').getElementsByTagName('input');

然后，您将拥有一个新的输入值数组。

而且，做出可怕的假设，结果数组中有数字，它reduce了救援：

let totalArrayValues = arrayOfInputValues.reduce((acc, curVal) => acc + curVal, 0)

Answer 4

此查询将仅 select 字段集中的数字输入

您可以将查询编辑为更具体或更通用的添加 id 删除输入类型这一切都取决于您想要什么

 const fields = document.querySelectorAll('fieldset input[type=number]'); const total = document.getElementById('asset'); let count = 0; function ass(){ fields.forEach(elem => count += Number(elem.value)); total.innerHTML = count; count = 0; }

 <fieldset> <h2>Total assets</h2> <p class='a'> <label for='A'>A</label> <input type="number" name="A" id="A" oninput="ass()" placeholder="0" value=0> &euro;<br> </p> <p class='a'> <label for='B'>B</label> <input type="number" name="B" id="B" oninput="ass()" placeholder="0" min="0" value=0> &euro;<br> </p> <p class='a'> <label for='C'>C</label> <input type='number' name='C' id='C' oninput="ass()" min='0' placeholder="0" value=0> &euro;<br> </p> </fieldset> <h2 id="total">Your total assets are: </h2> <output type="number" id="asset" name="asset"> &euro;

上面的例子是为了让你更容易阅读，但最好我会使用reduce

让它更有效率

function ass(){
      total.innerHTML =  total.innerHTML = [...fields].reduce((acc, curr) => acc + Number(curr.value), 0)
}

这与上面的代码片段基本相同，但更短/更简洁

javascript 中用户输入的字段总和

问题描述

4 个解决方案

解决方案1
0 2021-01-19 00:23:20

解决方案2
0 已采纳 2021-01-19 00:23:37

解决方案3
0 2021-01-19 00:26:56

解决方案4
0 2021-01-19 00:37:31

javascript 中用户输入的字段总和

问题描述

4 个解决方案

解决方案1 0 2021-01-19 00:23:20

解决方案2 0 已采纳 2021-01-19 00:23:37

解决方案3 0 2021-01-19 00:26:56

解决方案4 0 2021-01-19 00:37:31

解决方案1
0 2021-01-19 00:23:20

解决方案2
0 已采纳 2021-01-19 00:23:37

解决方案3
0 2021-01-19 00:26:56

解决方案4
0 2021-01-19 00:37:31