时间戳

首页 > 解决方案 > Javascript 表单的意外行为

javascript - Javascript 表单的意外行为

问题描述

当我在输入值为 22 后单击“单击我”按钮时，我在网页上看不到任何更改。我怎样才能解决这个问题？

function fun() {
  n = document.getElementById("number").value;
  headingTag = document.getElementById("h2");
  headingTag.innerText = n;
}
<form>
  <input type="text" id="number">
  <button onclick="fun()">Click Me!</button>
</form>
<h2 id="h2"></h2>

标签： javascripthtml

解决方案

用于preventDefault()通过按钮停止表单提交行为。参考

function fun(e) {
  e.preventDefault();
  n = document.getElementById("number").value;
  headingTag = document.getElementById("h2");
  headingTag.innerText = n;
}
<body>
  <form>
    <input type="text" id="number">
    <button onclick="fun(event)">Click Me!</button>
  </form>
  <h2 id="h2"></h2>
</body>

推荐阅读