javascript - 将输入值存储在数组中，获取重复的控制台日志

Question

我正在尝试使用 JavaScript 存储 HTML 表单中的输入值。我得到了我正在寻找的结果，但不确定它是否是正确或最有效的方法，因为每次我按提交时，它都会循环并增加数组，但控制台日志也会重复一个。
我已经很清楚我有两个控制台日志，这不是问题。没有解释的否决是完全没有必要的，因为我如何改进我的查询？

let inputArr= [];

document.getElementById("submit-btn").onclick = function submitFormVal(event){
  event.preventDefault();
  let inputVal;
  
  inputVal = document.getElementById("form-val").value;
  
  console.log(inputVal);
    
  inputArr.push(inputVal);
  
  for(let i =0; i < inputArr.length;i++){
    inputArr[i];
    inputArr = inputArr.map(Number);
    console.log(inputArr);
  };
};

<form id="form-test">
  <input type="number" id="form-val" value="1">
  <button  id="submit-btn">Submit</button>
</form>

Answer 1

您的console.log()位于您的循环内。随着数组的增长，循环会迭代更多，因此您可以获得同一数组的更多日志记录。

移动它，使其在循环之后运行，并在函数开头使用 console.clear() ，这样您就只能看到最新的数据。

此外，如果您实际上并未在任何地方提交任何数据，请不要使用提交按钮。只需使用常规按钮，您就无需担心取消 submit 事件。

最后，使用现代标准。 onclick(事件属性)限制您使用该事件的能力。而是使用 .addEventListener

let inputArr= [];

document.getElementById("submit-btn").addEventListener("click", function(event){
  console.clear(); // clear out old data
  
  let inputVal;
  
  inputVal = document.getElementById("form-val").value;
  
  console.log(inputVal);
    
  inputArr.push(inputVal);
  
  for(let i =0; i < inputArr.length;i++){
    inputArr[i];
    inputArr = inputArr.map(Number);
  };
  console.log(inputArr);
});

<form id="form-test">
  <input type="number" id="form-val" value="1">
  <button type="button" id="submit-btn">Submit</button>
</form>

现在，考虑到所有这些，真正的解决方案比您正在做的要简单得多。不需要循环来创建一个新的数字数组，其中还包含一项。您所要做的就是.push 将新数据(经过简单的数字转换)放入现有数组中。另外，在按下按钮之前只获取一次 DOM 引用，这样您就不必在每次按下按钮时都不断地查找它。

let inputArr= [];

// Get your DOM reference just once, not every time you click the button
let inputVal = document.getElementById("form-val")

document.getElementById("submit-btn").addEventListener("click", function(event){
  console.clear(); // clear out old data
  inputArr.push(+inputVal.value);  // the prepended + implicitly converts the string to a number
  console.log(inputArr);
});

<form id="form-test">
  <input type="number" id="form-val" value="1">
  <button type="button" id="submit-btn">Submit</button>
</form>