在Array中存储输入值，获取重复的控制台日志

Question

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

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按钮。只需使用常规按钮，您就不必担心取消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>

Answer 2

你可以使用indexOf。它将检查数组中是否存在该值。如果不存在，则会添加该元素

let inputArr = [];

document.getElementById("submit-btn").onclick = function submitFormVal(event) {
  event.preventDefault();
  let inputVal = document.getElementById("form-val").value;

  if (inputArr.indexOf(inputVal) === -1) {
    inputArr.push(inputVal)
  }
  console.log(inputArr);
};

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

</form>