Question

我试图显示打印的文字，但它只显示了一会儿 - 不知道为什么。

HTML

<div>
  <h1 id="ASD"></h1>
</div>
<form>
  <input type="text" id="OUTPUT">
  <input type="submit" value="Check">
</form>

CSS

div{
  height: 200px;
  width: 200px;
  background: red;
}

JS

let output= document.getElementById('OUTPUT');
const newSubmit = document.querySelector('input[type=submit]');

function checkNumber() {
  document.getElementById('ASD').textContent = output.value;
}
newSubmit.addEventListener('click', checkNumber, false);

http://codepen.io/Shalahmander/pen/QdKvgJ

单击“提交”后，应在框中显示键入的文本。

Answer 1

页面在提交点击时刷新（表单已处理）。您可以处理event对象并调用.preventDefault来取消默认行为，如下所示：

let output= document.getElementById('OUTPUT');
const newSubmit = document.querySelector('input[type=submit]');

function checkNumber(e) {
  document.getElementById('ASD').textContent = output.value;
  e.preventDefault();
}
newSubmit.addEventListener('click', checkNumber, false);

但如果您想执行其他操作（而不是提交表单），我建议您使用<button/></button>或<input type="button"></input>。

另外，请务必关闭代码：<input>...</input>或<input />。

textContent只显示内容一段时间（使用addEventListener）

1 个答案: