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

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

您可以直接使用 indexOf。它将检查 array.If 中是否存在该值，然后它将添加元素

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>

Answer 2

您的 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>

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

Storing input value in Array, getting duplicate console logs

javascript

arrays

console.log