javascript - 通过javascript中文本框的类名获取所有元素

Question

我的 javascript 页面上有一些文本框，其类为 textID。所以如果我要做

function UpdateTotals() {
    getText = document.getElementsByClassName('textID').value;
}

所有的值都是数字，那么如何将这个类中的所有值加在一起呢？示例：有 4 个文本框，每个文本框中都有数字 2。我想通过将它们全部加在一起来获得 8 个（但只有该类中的文本框）。

标签： javascripthtmlgetelementbyid

Answer 1

一个例子是使用Array.prototype.reduce()

const textID = document.querySelectorAll('.textID');
const total = [...textID].reduce((a, el) => a + (+el.textContent.trim()), 0);

console.log(total);   // 8

<div class="textID">2</div>
<div class="textID">2</div>
<div class="textID">2</div>
<div class="textID">2</div>

对于 INPUT 元素：

const textID = document.querySelectorAll('.textID');
const total = [...textID].reduce((a, el) => a + (+el.value), 0);

console.log(total);   // 8

<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">

使用NodeList.forEach()

const textID = document.querySelectorAll('.textID');
let total = 0;

textID.forEach(el => total += +el.value);

console.log(total);   // 8

<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">
<input class="textID" type="number" value="2">