javascript - Javascript 数组。加法、减法和求和

Question

我在老师向我的班级分配的涉及 javascript 数组的作业时遇到了一些麻烦。他们本质上希望我们做的是创建一种购物车/计算器混合，允许用户输入数字，存储它们并排列并在网页上显示这些数字，然后能够将它们加在一起以获得总数或重置它们和重来。

我想我或多或少知道如何制作一个重置按钮，而且我相信我已经弄清楚如何足够有效地将项目添加到数组中，但我对如何在 html 页面上显示这些项目以及如何将它们加在一起以形成并显示总数。任何帮助将不胜感激，我对此有点陌生，到目前为止，我们源材料中的说明有点含糊，难以理解，至少对我而言！

到目前为止，我有一些用于输入字段的简单 html 和一个“添加数字”按钮，该按钮会将输入字段添加到数组中（我稍后会将其限制为数字）。

<form onsubmit="return userNumber()">
        <p>Number:</p>
        <input type="text" id="box" /> 
        <br>
        <input type="button" value="Add Number" />
        <input type="button" value="Calculate" />
        <input type="button" value="Reset" />
       </form>

我还没有计算或重置按钮的代码，但是当我打开控制台时，添加数字按钮似乎可以正常工作，我只需要它也显示在网页上。这就是我所拥有的。

var numbers = [];

function userNumber() {
  boxvalue = document.getElementById('box').value;
  numbers.push(boxvalue);  
  console.log(numbers);
  return false;
}

我附上了我们老师给我们看的图片，他们希望我们让它只在功能上相似，外观并不重要。

再次感谢任何可以提供帮助的人，我很迷茫从这里去哪里！

标签： javascripthtmlarrays

Answer 1

首先，给他们一个id. 当他们都有“名字”时，与他们合作会容易得多。然后您可以轻松处理事件（本例中的点击）。

请注意，当您单击“添加”按钮时，push您需要使用之前的parseInt(string, base)sinceinput.value是一个字符串，并且+运算符是字符串的连接，而不是加法。如下sum += numbers[i];所示。

numbers例如，当您单击带有空数组的“计算”按钮时，可以为极端情况提供一些保护。

var numbers = [];
var boxInput = document.getElementById("box");
var addBtn = document.getElementById("add");
var calculateBtn = document.getElementById("calculate");
var resetBtn = document.getElementById("reset");
var allNumbers = document.getElementById("all-numbers");
var calculatedNumbers = document.getElementById("calculated-numbers");

addBtn.addEventListener("click", function() {
  if (boxInput.value.length > 0) {
    numbers.push(parseInt(boxInput.value, 10));
    boxInput.value = "";
  }

  allNumbers.innerHTML = numbers.join(" ");
});

calculateBtn.addEventListener("click", function() {
  if (numbers.length === 0) {
    return;
  }

  for (var i = 0, sum = 0; i < numbers.length; i++) {
    sum += numbers[i];
  }

  calculatedNumbers.innerHTML = numbers.join(" + ") + " = " + sum;
});

resetBtn.addEventListener("click", function() {
  numbers = [];
  boxInput.value = "";
  allNumbers.innerHTML = "";
  calculatedNumbers.innerHTML = "";
});

<p>
  <label for="box">Number:</label>
  <input id="box" type="number" />
</p>

<p>
  <input type="button" id="add" value="Add Number" />
  <input type="button" id="calculate" value="Calculate" />
  <input type="button" id="reset" value="Reset" />
</p>

<h3>Numbers added:</h3>
<p id="all-numbers"></p>

<h3>Sums of numbers added:</h3>
<p id="calculated-numbers"></p>