提交表單后如何清除輸入字段並將值推送到數組（Vanilla JS）

Question

Onclick 按鈕我想獲取提交的值並將它們索引到空數組中。 正如您在底線中看到的那樣，我在表單上使用了 reset 方法，但是在記錄數組時，所有索引都有一個空值。

我還使用 preventDefault() 來阻止表單提交，表單標簽會導致問題嗎？

 const enteredNumbers = []; console.log(enteredNumbers); const form1 = document.getElementById("form1"); form1.addEventListener("submit", e => { e.preventDefault(); const values = document.getElementsByName("number")[0]; enteredNumbers.push(values); form1.reset(); }, true);

 <form id="form1"> <div class="row w-100 d-flex justify-content-between div1"> <div class="col-12 d-flex justify-content-center"> <input type="number" name="number" id="number" min="1" max="100"> </div> <div class="col-12 d-flex justify-content-center"> <button type="submit" form="form1" id="submit">Submit</button> </div> </div> </form>

Answer 1

表單標簽不會導致此問題，但其他兩件事會：

1. 每次提交后記錄數組，而不僅僅是在頁面第一次呈現時（腳本第一次運行）。
2. 您的values是一個html 元素，而不是值。 價值是elem.value ，這就是我推到那里的。

祝你好運

 const enteredNumbers = []; const form1 = document.getElementById("form1"); form1.addEventListener("submit", e => { e.preventDefault(); const values = document.getElementsByName("number")[0]; enteredNumbers.push(values.value); form1.reset(); console.log(enteredNumbers); }, true);

 <form id="form1"> <div class="row w-100 d-flex justify-content-between div1"> <div class="col-12 d-flex justify-content-center"> <input type="number" name="number" id="number" min="1" max="100"> </div> <div class="col-12 d-flex justify-content-center"> <button type="submit" form="form1" id="submit">Submit</button> </div> </div> </form>

Answer 2

我只是提醒我忘記將 value 屬性添加到此：

document.getElementsByName("number").value

對不起，這可以關閉