Console.log() 和 el.innerText 立即重置（帮助）

Question

我在 html 文件中有这个简单的模板。 每次单击按钮时，它都应该记录单击事件并在 #result 元素中打印“[NodeList]”，但它没有。 事实上，它会打印几毫秒，然后再次将其删除。 与 console.log(e) 相同。 我记录了这种行为：链接到视频： https : //drive.google.com/file/d/1B7TycQxZPi0dqx7Try6kUZM3pcJs0ILW/view

有人可以建议修复吗？

 document.getElementById("btn").addEventListener("click", e => { console.log(e); result.innerText = document.getElementsByName("day"); });

 <h1>Your Day Plan:</h1> <p>Enter your day</p> <form> <input type="radio" id="mon" name="day" value="mon" /> <label for="mon">mon</label><br /> <input type="radio" id="tue" name="day" value="tue" /> <label for="tue">tue</label><br /> <input type="radio" id="wed" name="day" value="wed" /> <label for="wed">wed</label><br /> <input type="radio" id="thu" name="day" value="thu" /> <label for="thu">thu</label><br /> <input type="radio" id="fri" name="day" value="fri" /> <label for="fri">fri</label><br /> <button id="btn">Calculate Plan</button> </form> <h5 id="result"></h5>

Answer 1

按钮的默认类型是提交，为了防止表单提交，您必须手动指定type="button" ：

<button type="button" id="btn">Calculate Plan</button>

或：使用event.preventDefault()

Event接口的preventDefault()方法告诉用户代理，如果事件没有得到显式处理，则不应像通常那样采取其默认操作。

 <h1>Your Day Plan:</h1> <p>Enter your day</p> <form> <input type="radio" id="mon" name="day" value="mon" /> <label for="mon">mon</label><br /> <input type="radio" id="tue" name="day" value="tue" /> <label for="tue">tue</label><br /> <input type="radio" id="wed" name="day" value="wed" /> <label for="wed">wed</label><br /> <input type="radio" id="thu" name="day" value="thu" /> <label for="thu">thu</label><br /> <input type="radio" id="fri" name="day" value="fri" /> <label for="fri">fri</label><br /> <button id="btn">Calculate Plan</button> </form> <h5 id="result"></h5> <script> document.getElementById("btn").addEventListener("click", e => { console.log(e); result.innerText = document.getElementsByName("day"); event.preventDefault(); }); </script>