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

Question

我在 html 文件中有这个简单的模板。每次单击按钮时，它都应该记录单击事件并在#result 元素中打印“[NodeList]”，但事实并非如此。事实上，它会打印几毫秒，然后再次将其删除。与 console.log(e) 相同。我记录了这种行为： Link 到视频：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()

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

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

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

Console.log() and el.innerText reset immidiately (help)

javascript

console

dom

console.log