一秒钟后使用JS在同一页面上呈现表单数据后数据消失

Question

我试图使用JavaScript在同一页面上呈现表单数据。

的JavaScript

function renderInput(age) {
    document.getElementById('display').innerHTML += age;
}

当将提交按钮放置在form元素之外时，它可以工作。

HTML-工作正常

<form>
  <label><b>Enter your age</b></label>
  <input type="text" name="age" id="user_input">
</form>

<input type="submit" 
onclick='renderInput(document.getElementById("user_input").value);'><br/>

<div id='display'>Your age is </div>

当它仅短暂地呈现id为“ display”的div时，如果将提交字段放在form元素内，则消失。

HTML-无效时

<form>
  <label><b>Enter your age</b></label>
  <input type="text" name="age" id="user_input">
  <input type="submit" 
onclick='renderInput(document.getElementById("user_input").value);'><br/>
</form>

<div id='display'>Your age is </div>

我似乎无法解决这个问题。 为什么会这样呢？

Answer 1

您应该使用以下onclick事件返回false来停止提交表单：

<input type="submit" onclick='renderInput(document.getElementById("user_input").value); return false;'>