Question

我想从数组中获取数字。首先，我想收集这些数字的总和，然后收集这些数字。但是我不能，如何在这里使用split？也许这里不需要拆分。

var input = document.getElementById("myInp");
input.addEventListener("blur", getValues);

var num = document.getElementById("myNum");

var result = document.getElementById("result");
var sumBtn = document.getElementById("sumBtn");
sumBtn.addEventListener("click", getSum);

var arr = [];

function getValues() {
  arr.push(input.value);
  num.innerHTML = arr;
}


function getSum() {
  result.innerHTML = 0;
  arr.split(",");

  result.innerHTML = parseFloat(result.innerHTML) + arr;
}

<input type="text" id="myInp">
<button id="myBtn">Start</button>

<p id="myNum"></p>

<button id="sumBtn">Getsum</button>
<p id="result"></p>

Answer 1

您的意思是arr.join。而且您也需要reduce并转换为数字

假设您想一次输入一个数字，则代码如下所示：

var input = document.getElementById("myInp"),
  but = document.getElementById("myBtn"),
  num = document.getElementById("myNum"),
  result = document.getElementById("result"),
  sumBtn = document.getElementById("sumBtn");

but.addEventListener("click", getValues);
sumBtn.addEventListener("click", getSum);

var arr = [];

function getValues() {
  var val = +input.value // make it a number before pushing
  if (!isNaN(val)) {
    arr.push(val); 
  }  
  input.focus(); 
  input.select();
  num.innerHTML = arr;
}


function getSum() {
  result.innerHTML = arr.join("+") + "=" + 
    arr.reduce((a, b) => a + b, 0); // the reduce will sum the numbers
}

<input type="text" id="myInp">
<button id="myBtn">Start</button>

<p id="myNum"></p>

<button id="sumBtn">Getsum</button>
<p id="result"></p>

如果要输入逗号分隔的数字，请尝试以下操作：

var input = document.getElementById("myInp"),
  but = document.getElementById("myBtn"),
  num = document.getElementById("myNum"),
  result = document.getElementById("result"),
  sumBtn = document.getElementById("sumBtn");

but.addEventListener("click", getValues);
sumBtn.addEventListener("click", getSum);

var arr = [];

function getValues() {
  arr.push(input.value);
  input.focus();
  input.select();
  num.innerHTML = arr;
}


function getSum() {
  console.log(arr)
  arr.forEach(function(nums) {
    if (nums) {
      var thisArr = nums.split(",")
      result.innerHTML += thisArr.join("+") + "=" +
        thisArr.reduce((a, b) => +a + +b, 0) + "<br/>"; // the reduce will sum the numbers
    }
  })
}

<input type="text" id="myInp" placeholder="for ex. 1,2,3">
<button id="myBtn">Start</button>

<p id="myNum"></p>

<button id="sumBtn">Getsum</button>
<p id="result"></p>

Answer 2

您可以尝试以下代码

    var input = document.getElementById("myInp");
    input.addEventListener("blur", getValues);

    var num = document.getElementById("myNum");

    var result = document.getElementById("result");
    var sumBtn = document.getElementById("sumBtn");
    sumBtn.addEventListener("click", getSum);



    var arr = [];

    function getValues(){
    	arr.push(input.value);
    	num.innerHTML = arr;
    }


    function getSum(){
    	result.innerHTML = 0;
    	let data = arr[0].split(",");
    	let sum = data.reduce((sum,val)=>{return sum + parseFloat(val);},0)
    	result.innerHTML = sum;
    }

    <input type="text" id="myInp">
    <button id="myBtn">Start</button>

    <p id="myNum"></p>

    <button id="sumBtn">Getsum</button>
    <p id="result"></p>

Answer 3

var input = document.getElementById("myInp");
input.addEventListener("blur", getValues);

var num = document.getElementById("myNum");

var result = document.getElementById("result");
var sumBtn = document.getElementById("sumBtn");
sumBtn.addEventListener("click", getSum);

var arr = [];

function getValues() {
  arr.push(input.value);
  num.innerHTML = arr;
}


function getSum() {
  result.innerHTML = 0; 

  result.innerHTML = arr.reduce((a, x) => +a + +x);
}

<input type="text" id="myInp">
<button id="myBtn">Start</button>

<p id="myNum"></p>

<button id="sumBtn">Getsum</button>
<p id="result"></p>

Answer 4

我假设您要一一键入每个数字。我写了这段代码作为您可能想要的示例。

我删除了开始按钮，并将其添加，因此当您单击Enter时，它会添加到数组中。（我认为，开始按钮的目的是向数组中添加数字。您已经有了“模糊”事件监听器）。

我还将输入类型从文本更改为数字，以减少失败的机会。

var arr = [];
var input = $('#myInp');
var num = $('#myNum');
var sumBtn = $('#sumBtn');
var result = $('#result');


input.keypress(function(e) {
  if (e.keyCode == 13) {
    getValues(this);
    input.val("");
  }
});

sumBtn.click(function(){
	result.text(arr.reduce((a, b) => a + b, 0))
})

function getValues(e) {
  arr.push( parseInt(input.val()));
  $('#myNum').text(arr.join(" + "));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="myInp">

<p id="myNum"></p>

<button id="sumBtn">Getsum</button>
<p id="result"></p>

如何从推送数组中获取数字

4 个答案: