javascript - 如何从标签中相互加号

Question

我需要加上标签中的每个数字。但无法弄清楚如何做到这一点，Javascript对我来说是新的。

html

<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>

javascript

var number = document.querySelectorAll('.number');

for ( var i = 0; i < number.length; i++ ) {

    var nums = number[i].textContent;
    var Result = //code to get 1+2+3+4
    console.log(result); // Result must be 10

}

Answer 1

对于加法，将字符串转换为数字，因为textContent将返回字符串并在循环外声明结果以在每次迭代时将值添加到其中

var number = document.querySelectorAll('.number');
var result=0;
for ( var i = 0; i < number.length; i++ ) {
    var nums = number[i].textContent;
    result+=Number(nums);
    // Result must be 10

}
console.log(result); 

<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>

Answer 2

以下代码将总结所有数字。

var number = document.querySelectorAll('.number');
    var result=0;
    for ( var i = 0; i < number.length; i++ ) {
          result+=Number(number[i].textContent);
      }
     console.log(result); // Result must be 10

Answer 3

有很多方法可以解决这个问题。在您的代码上方，您正在循环中编写代码。这不应该。

您要添加所有项目所以您可以使用以下代码

var result=0;
for ( var i = 0; i < numbers.length; i++ ) {
        result+= +numbers[i].textContent;
    }
    console.log(result);

或者

[].slice.call(document.querySelectorAll(".number")).reduce((x,y)=>{
    return ((+x.textContent)||x) + +y.textContent
})

代码如下

var numbers=document.querySelectorAll(".number");
var result=0;

for ( var i = 0; i < numbers.length; i++ ) {
    result+= +numbers[i].textContent;
}
console.log(result); 

<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>

或者

var result=[].slice.call(document.querySelectorAll(".number")).reduce((x,y)=>{
    return ((+x.textContent)||x) + +y.textContent
});
console.log(result);

<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>

Answer 4

简单求和 - 和高级 javascript - 干净的代码和命名

我已将名称更改为更有意义的名称，并尽可能使用 let 和 const。

第一个（总和）是你的简单的。

第二个（sum2）使用forEach。

第三个（sum3）使用reduce。

const numbers = document.querySelectorAll('.number');
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
  console.log('count-', sum, '+', Number(numbers[i].textContent), '=', sum + Number(numbers[i].textContent));
  sum += Number(numbers[i].textContent);
}
console.log('sun', sum);

let sum2 = 0;
[...numbers].forEach(num => sum2 += Number(num.textContent));
console.log('sun2', sum2);

const sum3 = [...numbers].reduce((acc, num) => acc + Number(num.textContent), 0);
console.log('sun3', sum3);

<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>

CodePen ( https://codepen.io/omergal/pen/QWWjzBz?editors=1010 )