textContent显示内容仅一会（使用addEventListener）

Question

I'm trying to display typed text, but it shows only for a moment - don't know why.

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

Typed text should be display in box after click Submit.

Answer 1

The page is refreshing on the submit click (the form is processed). You can handle event object and call .preventDefault to cancel the default behavior, like this:

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

But I suggest using <button/></button> or <input type="button"></input> if you want to perform another action (than submit your form).

Also, remember to close your tags: <input>...</input> or <input /> .