使用 Javascript 将数组中的任意数量的项目加在一起答案

【问题标题】：Adding together any number of items in an array with Javascript使用 Javascript 将数组中的任意数量的项目加在一起
【发布时间】：2020-06-19 18:19:53
【问题描述】：

我正在学习 Javascript，目前在创建应用程序时遇到问题。我想创建一个网页，它将获取在文本框中输入的值，并将它们放在一个数组中。然后，我想创建一个将值相加的函数。我几乎完成了，但我很难弄清楚如何创建一个将数组项加在一起的函数。我最大的问题是可以在页面中输入任意数量的值，并且我能找到的所有文档都是基于预先设置的数组。这是我的代码：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Numbers</title>
</head>
<body>
    <section>
        <header class="header m-2" id="myForm">Numbers App</header>
        <section class="row m-2">
            <label class="inputLabel">Number: <input type="number" id="numInput"></label>
        </section>
        <button class="button m-1" onclick="displayText(); addNum(); testCount();" id="addButton">Add Number</button>
        <button class="button m-1" disabled>Calculate</button>
        <button class="button m-1" onclick="resetPage();">Reset</button>
    </section>

    <section id="numForm">
        <div class="numLabel m-2" id="numLabel">Numbers Added: </div>
        <p class="m-2 mt-3" id="numValue"></p>
    </section>

<script src="script.js"></script>
</body>
</html>

JS:
//Display "Numbers Added: " 
function displayText() {
    document.getElementById("numLabel").style.display = "block";
}

//Add the entered values into the array
let numArray = [];
function addNum() {
    let num = document.getElementById("numInput").value;

    numArray.push(num);
    document.getElementById("numValue").innerHTML = numArray.join(" ");
}

//Testing count function
function testCount() {
    for(count = 0; count > 2; count++) {
        console.log("this works");
    }
}

//Reset the page
function resetPage() {
    //Clear input field
    document.getElementById("numInput").value = "";
    //Hide "Numbers Added: "
    document.getElementById("numLabel").style.display = "none";
    //Clear array items
    numArray = [];
    document.getElementById("numValue").innerHTML = "";
}

【问题讨论】：

你的想法是对的；但是，您正在将字符串传递给您的数组。尝试 numArray.push(parseInt(num)) 代替 numArray.push(num)。之后，当您触发该计算按钮时，然后获取该 numArray 并使用一个简单的 for 循环将它们全部添加在一起，然后将其显示为 innerhtml。
感谢有帮助的 cmets，我非常接近使用以下功能到达我想去的地方：
function arraySum() { var result = numArray.reduce((acc, curr) => parseInt(curr) + parseInt(acc), 0); document.getElementById("numValue").innerHTML = numArray[1] + " + " + numArray[2] + " = " + 结果； }
但是，我最大的问题仍然是数组没有预先定义。我可以通过“numArray[1]”调用数组元素，但是可以在文本框中输入任意数量的整数，所以我不能像那样将它们串在一起。我需要找到一种方法来为任意数量的数组元素创建此计算

标签： javascript html arrays addition arithmetic-expressions

【解决方案1】：

编辑：要显示添加可以使用类似的东西：

const array1 = [1, 2, 3, 4];
const result = array1.reduce((acc, curr) => parseInt(curr) + parseInt(acc));

let additionDisp = array1.join(" + ") + " = " + result;
console.log(additionDisp);

【讨论】：

我的错，回首往事，我绝对可以更好地措辞。我目前有一个“添加数字”按钮，可以将文本框的值添加到我的数组中。我想做第二个按钮“计算”，它将输入到数组中的值，并将它们加在一起。我还希望它显示加在一起的数字。例如，如果我输入 5 和 10，我希望计算按钮显示：“添加的数字：5 + 10 = 15”。希望这个解释更容易理解。
那么请看下面的答案

【解决方案2】：

您需要先声明您的add 函数，parse 您的字符串输入为整数值并执行归约以获得总和

//Add the entered values into the array
let numArray = [];

//Display "Numbers Added: " 
function displayText() {
  var result = numArray.reduce((acc, curr) => parseInt(curr) + parseInt(acc), 0);
  var numSumString = "";
  for (data of numArray) {
    numSumString = data + " + " + numSumString;
  }
  document.getElementById("numLabel").innerHTML = "Numbers Added:" + numSumString.substring(0, numSumString.length - 2) + "=" + result;
}

function addNum() {
  let num = document.getElementById("numInput").value;
  numArray.push(num);
  document.getElementById("numValue").innerHTML = numArray.join(" ");
}


//Reset the page
function resetPage() {
  //Clear input field
  document.getElementById("numInput").value = "";
  //Hide "Numbers Added: "
  document.getElementById("numLabel").style.display = "none";
  //Clear array items
  numArray = [];
  document.getElementById("numValue").innerHTML = "";
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Numbers</title>
</head>

<body>
  <section>
    <header class="header m-2" id="myForm">Numbers App</header>
    <section class="row m-2">
      <label class="inputLabel">Number: <input type="number" id="numInput"></label>
    </section>
    <button class="button m-1" onclick="addNum();" id="addButton">Add Number</button>
    <button class="button m-1" onclick="displayText();">Calculate</button>
    <button class="button m-1" onclick="resetPage();">Reset</button>
  </section>

  <section id="numForm">
    <div class="numLabel m-2" id="numLabel">Numbers Added: </div>
    <p class="m-2 mt-3" id="numValue"></p>
  </section>

  <script src="script.js"></script>
</body>

</html>

【讨论】：

嗨，这非常有用，但不是我想要的。我绝对应该更好地表达我的问题。我目前有一个“添加数字”按钮，它将文本框的值作为数组项添加到我的数组中。我想做第二个按钮“计算”，它将获取数组项，并将它们加在一起。我也希望它显示计算。例如，如果我输入 5，然后输入 10，我希望计算按钮显示以下 HTML：“5 + 10 = 15”。再次感谢您的时间和帮助，希望这可以使事情变得更好。
@Acuff558，只需像上面那样更改逻辑即可。查看修改后的代码
谢谢！这太棒了，而且效果很好。我不知道 subString 属性，但我现在要对其进行更多研究。
@Acuff558，如果它为您解决，请将其标记为正确。谢谢

【解决方案3】：

使用Array.prototype.reduce。

const array = [0, 42, 101, 5, 2];
const total = array.reduce((sum, x) => sum + x);

console.log(total);

【讨论】：