フォームとJavaScriptのinnerHTMLの問題

Question

昨日、フォームの入力に書いた内容をテキストコンテンツに表示するコードを作っていました。このコードの問題は、あなたがボタンをクリックしたときに、それは数回のテキストを置き換えることですし、それはページを更新

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

：私はこれを書きました。これをどうすれば解決できますか？

Answer 1

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> 

これはアクセス可能であること、およびユーザーがテキストフィールドがフォーカスされている間がを入力当たったとき、このような暗黙の提出などの機能を可能にするという利点を有します。

Answer 2

ボタンにtype="button"を追加します。デフォルトのボタンのタイプはsubmitなので、フォームをサーバーに送信して、ページをリフレッシュします。非送信ボタンはフォーム提出を引き起こさないので、JavaScriptだけが実行されます。