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 元素并将其存储在一个变量中。您可以调用您的函数并迭代这些元素并访问他的值。试试这个：

pygame 2.0.1 (SDL 2.0.14, Python 3.8.7)
Hello from the pygame community. https://www.pygame.org/contribute.html
downwards motion completed
sleep done
(velocity, seconds)
upwards motion completed

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

Answer 2

您可以为所有 sum 字段指定一个类名，然后使用 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

这个查询只会选择字段集中的输入是数字输入

您可以将查询编辑为更具体或更通用的添加 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 个答案: