Проблемы с формой и innerHTML на JavaScript

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.