将输入用作数组，然后乘以索引值并得到总和答案

【问题标题】：Use input as array, then multiply by value of index and get sum将输入用作数组，然后乘以索引值并得到总和
【发布时间】：2020-07-14 22:15:33
【问题描述】：

对不起，如果我的条款有误，我是新手！

我想要做的是让用户输入 4 个数字，将它们放入一个数组中，然后将这些数字相乘，然后返回总和。示例：

用户输入 1234
我想要它做什么：[1,2,3,4]
我想要的数学：(1*1) + (2*2) + (3*3) + (4*4)
输出：30

这就是我所做的：

arr = [];
var number= parseInt(document.getElementById("number"));
arr.push(number);
var sum = 0;

for (var i = 0; i< arr.length; i++){
 sum += (arr[i]*arr[i]) ;
}
console.log(sum);

我哪里错了？谢谢！

【问题讨论】：

您没有将输入拆分为单独的数字。
请检查我的答案！

标签： javascript html arrays sorting dom

【解决方案1】：

arr 是一个包含一个元素的数组，即用户输入的整数。

您需要将输入拆分为每个数字的单独数字。

此外，您必须使用.value 属性来获取用户输入的内容。

arr = [];
var number = document.getElementById("number").value;
for (var i = 0; i < number.length; i++) {
    arr.push(parseInt(number[i]));
}

【讨论】：

【解决方案2】：

我提供了 cmets 的完整示例。我希望这就是你要找的。

const doMagic=(numberInput)=>{
  // if it doesn't have value, return false
  if (!numberInput && numberInput.value) return false;
  // split input value by each character
  const arr = numberInput.value.split('');
  let sum = 0;
  for (var i = 0; i < arr.length; i++)
    sum += (arr[i]*arr[i]);
  return sum;
}

// get element, not value
const numberInput = document.getElementById("number");
// on elements value change call our function
numberInput.addEventListener('change',()=>
  console.log(doMagic(numberInput))
);

&lt;input id="number" type="number"/&gt;

【讨论】：

【解决方案3】：

这里的目的是教你loop，而不是array和slice，你可以使用简单的while loop和mathematics来做到这一点。

// var number = parseInt(document.getElementById("number"));

var number = 1234;
let sum = 0;
for (; number > 0; ) {
  const x = Math.floor(number % 10);
  sum += x * x;
  number = Math.floor(number / 10);
}
console.log(sum);

【讨论】：

【解决方案4】：

试试这个。

arr = [];
var number= document.getElementById("number");
arr = number.split("");// Splits the input into a string array like ["1","2","3","4"]
var sum = 0;

for (var i = 0; i< arr.length; i++){
 sum += (arr[i]*arr[i]) ;
}
console.log(sum);

注意：JS 在尝试检查输入类型时非常松散。假定输入始终为整数格式。

【讨论】：

【解决方案5】：

试试这个：

const input = document.getElementById("number");
const arr = [...input.toString()];
const sum = arr.reduce((total, item) => {
  const num = parseInt(item);
  const multipy = num * num;
  return (total += multipy);
}, 0);

console.log(sum);

【讨论】：

【解决方案6】：

您可以使用清晰的 for-of 语法 -

const numbers = [ 1, 2, 3, 4 ]

let result = 0

for (const num of numbers)
  result = result + (num * num)

console.log(result) // 30

你也可以使用Array.prototype.reduce -

const numbers = [ 1, 2, 3, 4 ]

const result = numbers.reduce((result, num) => result + (num * num), 0)

console.log(result) // 30

【讨论】：

【解决方案7】：

这是答案（请点击运行代码片段）

function getTotal() {
  arr = [];
  // you forget to put .value here
  var numbersAsAString = document.getElementById('number').value;
  // => 1234

  // and you need to take each digit from the input you insert
  for (var i = 0; i < numbersAsAString.length; i++) {
    // and as you did parseInt to convert string to number
    arr.push(parseInt(numbersAsAString[i]));
  }
  // console.log(arr); // [1,2,3,4]
  var sum = 0;

  for (var i = 0; i < arr.length; i++) {
    sum += arr[i] * arr[i];
  }
  // console.log(sum);
  document.getElementById('answer').innerHTML="Answer will be here: "+sum;
}

// If you need any explanation, or this is not what you are asking about, please comment on my answer

<html>

<head>
  <title>StackOverFlow &#127831;</title>
  <link rel="shortcut icon" type="image/x-icon" href="https://image.flaticon.com/icons/png/512/2057/2057586.png" />
</head>

<body>
  <h3>Stack Over Flow &#127831;</h3>

  <input id="number" type="text" value="1234">

  <button onclick="getTotal()">get the answer</button>
  <p id="answer">Answer will be here: </p>
</body>

</html>

如果您需要任何解释，或者这不是您要问的，请评论我的回答

【讨论】：