使用 addEventListener 处理表单提交时，执行的操作会立即恢复

Question

我的网页有一个带有输入框和提交按钮的简单表单，以及一个空段落：

<form action="" class="form" method="post" id="f">
    <input type="text" name="text" id="txt" value="">
    <input type="submit" name="submitButton" value="go">
</form>
<p id="p1"></p>

我正在尝试编写一个脚本，一旦提交按钮被提交，就会将提交的文本写入段落：

let f = document.getElementById('f')
f.addEventListener('submit', function () {
    let text = document.querySelector('#txt').value
    document.getElementById('p1').innerHTML = text
})

它有点有效，这意味着它确实显示了段落中的文本，但只是一瞬间，然后就消失了。我错过了什么？

Answer 1

您需要更改提交到按钮的输入类型。这不会重新加载页面。

function callClick(){
let text = document.querySelector('#txt').value
document.getElementById('p1').innerHTML = text;
}
</script>
<form action="" class="form" method="post">
    <input type="text" name="text" id="txt" value="">
    <input type="button" id="f" name="submitButton" value="go" onclick="callClick()">
</form>
<p id="p1"></p>

Answer 2

当我试图阻止人们复制我的图像时，我使用了事件侦听器您需要做的就是将 contextmenu 更改为 p1，然后将 #txt 更改为 txt

Answer 3

你需要preventDefault

let f = document.getElementById('f');
f.addEventListener('submit', function(e) { // access the submit event
  e.preventDefault(); // prevent the default behavior of the submit event
  let text = document.querySelector('#txt').value
  document.getElementById('p1').innerHTML = text
});

使用 addEventListener 处理表单提交时，执行的操作会立即恢复

When handling a form submission with addEventListener the action performed is reverted immediately

html

javascript

forms

addeventlistener