為什么這個JavaScript在將輸入值成功復制到元素文本后刪除了所有內容

Question

當我編寫像bellow這樣的代碼時，輸入字段中的文本會在p元素中顯示一秒鍾，然后它就會消失。 當我刪除表單標簽時，文本保留在p元素中。 為什么會這樣？

  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <form> <input type="text" id="txbox" placeholder="enter your name here"> <button id="btn">click</button> </form> <p id="app"></p> <script> function put() { var txt = document.getElementById('txbox').value; document.getElementById('app').innerHTML= txt; } var mybtn = document.getElementById('btn'); mybtn.addEventListener("click", put); </script> </body> </html>

Answer 1

那是因為您實際上在單擊按鈕時提交表單。 刪除<form>標記意味着該按鈕將不再提交表單，因為沒有。 當然，這通常遠非理想的解決方案。 有兩種替代解決方案：

使用<button type="button">這樣它就不會觸發表單提交並重新加載頁面
在click事件偵聽器上使用event.preventDefault可以停止觸發按鈕提交操作

解決方案1的概念驗證：

 function put() { var txt = document.getElementById('txbox').value; document.getElementById('app').innerHTML = txt; } var mybtn = document.getElementById('btn'); mybtn.addEventListener("click", put);

 <form> <input type="text" id="txbox" placeholder="enter your name here"> <button id="btn" type="button">click</button> </form> <p id="app"></p>

解決方案2的概念驗證：

 function put(event) { var txt = document.getElementById('txbox').value; document.getElementById('app').innerHTML = txt; event.preventDefault(); } var mybtn = document.getElementById('btn'); mybtn.addEventListener("click", put);

 <form> <input type="text" id="txbox" placeholder="enter your name here"> <button id="btn">click</button> </form> <p id="app"></p>

Answer 2

因為您將輸入包裝在表單標記中。 因此，數據將被提交。 如果您想避免此行為，則需要刪除表單標記，並從中獲取其內容

<body>
    <input type="text" id="txbox" placeholder="enter your name here">
      <button id="btn">click</button>

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

Answer 3

因為您提交表單，所以每次單擊按鈕時，都要阻止提交添加此表單。

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

為什么這個JavaScript在將輸入值成功復制到元素文本后刪除了所有內容

問題描述

3 個解決方案

解決方案1
3 2017-05-17 20:52:07

解決方案2
0 2017-05-17 20:53:44

解決方案3
0 2017-05-17 20:54:46

為什么這個JavaScript在將輸入值成功復制到元素文本后刪除了所有內容

問題描述

3 個解決方案

解決方案1 3 2017-05-17 20:52:07

解決方案2 0 2017-05-17 20:53:44

解決方案3 0 2017-05-17 20:54:46

解決方案1
3 2017-05-17 20:52:07

解決方案2
0 2017-05-17 20:53:44

解決方案3
0 2017-05-17 20:54:46