Вход в систему регистрации ошибок JS JACK

Question

<p>Enter some text</p> 
<form> 
<input type="text" id="userInput"> 
<button onclick="log();">Go!</button> 
</form> 

<script> 
function log() { 
    var input = document.getElementById("userInput").value; 
    console.log(input); 
} 
</script> 

Когда я нажимаю кнопку, она обновляет страницу, очищая журнал. Первоначально я пытался использовать <input type="submit">, но когда я нажимаю кнопку любого типа, он обновляется. Как я могу это остановить?

Answer 1

попробуйте:

<p>Enter some text</p> 
<form action="" method=""> 
    <input name="userInput" type="text" id="userInput" /> 
    <button type="button" onclick="log()">Go!</button> 
</form> 

<script> 
    function log() { 
     var input = document.getElementById("userInput").value; 
     console.log(input); 
     return false; 
    } 
</script> 

только добавить return false к вам JS. Подробнее ... stopPropagation.

Answer 2

Сложно сказать с вашим примером, но, как правило, если вы пытаетесь предотвратить действие, которое сделает что-то вроде обновления страницы от выполнения этого поведения по умолчанию, вы должны использовать метод preventDefault для обработчика событий. Таким образом, ваша функция станет

function log(e) { // passing in the event to the handler as "e" 
    var input = document.getElementById("userInput").value; 
    console.log(input); 
    e.preventDefault(); 
} 

редактировать: Обновлено с примечаниями Патрика в виду, хотя я до сих пор не вижу попытку обновления страницы в фрагменте кода, даже при отсутствии type атрибута, или тип button или submit ,

<p>Enter some text</p> 
 
<form action="" method=""> 
 
    <input name="userInput" type="text" id="userInput" /> 
 
    <button onclick="log(event)">Go!</button> 
 
</form> 
 

 
<script> 
 
    function log(e) { 
 
     var input = document.getElementById("userInput").value; 
 
     console.log(input); 
 
     e.preventDefault() 
 
    } 
 
</script>

Answer 3

<p>Enter some text</p> 
<form> 
    <input type="text" id="userInput"> 
    <button type="button" onclick="log();">Go!</button> 
</form> 

<script> 
    function log() { 
     var input = document.getElementById("userInput").value; 
     console.log(input); 
    } 
</script> 

Так просто добавить типа = «кнопка»