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

您可以使用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>

Answer 2

你的console.log()在你的循环中。随着数组的增长，循环迭代次数越多，因此您可以获得更多相同数组的记录。

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

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

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

＆＃13;

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);
});

＆＃13;

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

＆＃13;

现在，考虑到所有这些，这里真正的解决方案比你正在做的简单得多。不需要一个循环来创建一个新的数字数组，其中还有一个项目。您只需 .push 将新数据（通过简单的数字转换）添加到现有数组中。此外，在按下按钮之前，只需获取一次DOM参考，这样每次按下按钮时都不必继续查找。

＆＃13;

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);
});

＆＃13;

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

＆＃13;

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

2 个答案: