JavaScript上的form和innerHTML的問題

-1

昨天我編寫了一個代碼，用於在文本內容中顯示您在表單輸入中編寫的內容。我寫了這個：JavaScript上的form和innerHTML的問題

<p id="demo"> 
Show code 
</p> 
<form> 
    <input type="text" id="clo" /> 
    <button onclick="myFunctionn()">Try it</button> 
    <script type="text/javascript"> 
     //<![CDATA[ 
     function myFunctionn() { 
      var bub = document.getElementById("clo").value 
      var str = document.getElementById("demo").innerHTML; 
      var res = str.replace("code", bub); 
      document.getElementById("demo").innerHTML = res; 
     } 
     //]]> 
    </script> 
</form>

這段代碼的問題是，當你點擊按鈕，它代替了幾次文本，然後刷新頁面。我怎樣才能解決這個問題？

來源

2016-05-17 step

刪除表單元素，並應該解決您的問題。 –

不要綁定click處理程序。綁定窗體上的submit處理程序並防止默認行爲。

<form> 
    <input type="text" id="clo" /> <button type="submit">Try it</button> 
</form> 
<script> 
function myFunction(e) { 
    var bub = document.getElementById("clo").value 
    var str = document.getElementById("demo").innerHTML; 
    var res = str.replace("code", bub); 
    document.getElementById("demo").innerHTML = res; 
    e.preventDefault(); 
} 
document.querySelector('form').addEventListener('submit', myFunction, false); 
//and keep your JS out of your HTML 
</script>

這具有訪問，並允許功能，如隱含提交的優勢，當用戶點擊輸入而文本字段被聚焦。

來源

2016-05-17 20:19:55 zzzzBov

將type="button"添加到您的按鈕。按鈕的默認類型爲submit，因此它將表單提交給刷新頁面的服務器。非提交按鈕不會導致表單提交，因此只會執行Javascript。

來源

2016-05-17 20:41:51 Barmar

JavaScript上的form和innerHTML的問題

回答

相關問題