为什么这个JavaScript在成功地将输入值复制到元素文本后会删除所有内容_Javascript_Html_Forms

为什么这个JavaScript在成功地将输入值复制到元素文本后会删除所有内容

javascript html forms

为什么这个JavaScript在成功地将输入值复制到元素文本后会删除所有内容,javascript,html,forms,Javascript,Html,Forms,当我像bellow那样编写代码时，输入字段中的文本会在p元素中出现一秒钟，然后消失。当我删除表单标记时，文本保留在p元素中。为什么会发生这种情况你好，世界点击函数put（）{ var txt=document.getElementById（'txbox'）.value； document.getElementById（'app'）.innerHTML=txt； } var mybtn=document.getElementById（'btn'）； mybtn.addEventList

当我像bellow那样编写代码时，输入字段中的文本会在p元素中出现一秒钟，然后消失。当我删除表单标记时，文本保留在p元素中。为什么会发生这种情况


你好，世界
点击

函数put（）{
var txt=document.getElementById（'txbox'）.value；
document.getElementById（'app'）.innerHTML=txt；
}
var mybtn=document.getElementById（'btn'）；
mybtn.addEventListener（“单击”，放置）；

这是因为当您单击按钮时，实际上是在提交表单。删除

标记意味着按钮将不再提交表单，因为没有表单。当然，这往往远不是理想的解决方案。有两种替代解决方案：

使用

，使其不会触发表单提交并重新加载页面

在单击事件侦听器上使用

event.preventDefault

，以停止触发按钮提交操作

解决方案1的概念验证：

函数put（）{
var txt=document.getElementById（'txbox'）.value；
document.getElementById（'app'）.innerHTML=txt；
}
var mybtn=document.getElementById（'btn'）；
mybtn.addEventListener（“单击”，放置）

点击
因为您将输入包装在表单标签中。因此，将提交数据。如果希望避免这种行为，则需要删除表单标记，并从中获取其内容
<body>
    <input type="text" id="txbox" placeholder="enter your name here">
      <button id="btn">click</button>

    <p id="app"></p>
.....


点击

.....
因为您正在提交表单，每次单击按钮时，为了防止提交，请添加此项
function put(ev) {
   ev.preventDefault(); // to prevent submit of the form
    var txt = document.getElementById('txbox').value;
    document.getElementById('app').innerHTML= txt;
  }

  var mybtn = document.getElementById('btn');
  mybtn.addEventListener("click", put);

可能重复的