时间戳

首页 > 解决方案 > Console.log() 和 el.innerText 立即重置（帮助）

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

问题描述

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

标签： javascriptdomconsoleconsole.log

解决方案

按钮的默认类型是提交，为了防止表单提交，您必须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>

推荐阅读