Пожалуйста, почему этот код обновляет мою страницу после события onclick?

window.onload = init; 

function init() { 
    var button = document.getElementById("addButton"); 
    button.onclick = function() { 
     var songTitle = document.getElementById("songTextInput").value; 
     if (songTitle == "") alert("Baba Put Something Jare"); 
     else { 
      var playlist = document.getElementById("playlist"); 
      var song = document.createElement("li"); 
      song.innerHTML = songTitle; 
      playlist.appendChild(song); 
     } 
    }; 
}

HTML, тело состоит из:Пожалуйста, почему этот код обновляет мою страницу после события onclick?

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <link rel="stylesheet" href="#" /> 
 
    <meta charset="UTF-8" /> 
 
    <title>Web Tunes</title> 
 
    <script src="playlist.js"></script> 
 
</head> 
 

 
<body> 
 
    <form> 
 
    <input type="text" id="songTextInput" placeholder="Song Title"> 
 
    <input type="submit" id="addButton" value="Add Song"> 
 
    </form> 
 
    <ul id="playlist"></ul> 
 
</body> 
 

 
</html>

код выводит новый элемент списка, но обновляется сразу .. Пожалуйста, помогите.

источник

2014-12-22 user3622157

use event.preventDefault(); так что он остановит форму для отправки –

Спасибо, ребята. Head First HTML Programming использовал этот код, и я предполагаю, что он сработал для них. Никакая книга не прекрасна в конце концов .. Pls Как мы информируем их? Ради будущих читателей – user3622157

У вас есть входной тип submit внутри тега формы. Кнопка отправки сообщений Форма на сервер. Просто добавьте return false;, чтобы остановить отправку формы на сервер.

window.onload = init; 

function init() { 
    var button = document.getElementById("addButton"); 
    button.onclick = function() { 
     var songTitle = document.getElementById("songTextInput").value; 
     if (songTitle == "") alert("Baba Put Something Jare"); 
     else { 
      var playlist = document.getElementById("playlist"); 
      var song = document.createElement("li"); 
      song.innerHTML = songTitle; 
      playlist.appendChild(song); 
     } 
     return false; 
    }; 
}

источник

2014-12-22 07:21:42

Большое спасибо .. Это ответили на мой вопрос. – user3622157

<!doctype html> 
<html lang="en"> 

<head> 
    <link rel="stylesheet" href="#" /> 
    <meta charset="UTF-8" /> 
    <title>Web Tunes</title> 
    <script src="playlist.js"></script> 
</head> 

<body> 

    <input type="text" id="songTextInput" placeholder="Song Title"> 
    <input type="submit" id="addButton" value="Add Song"> 

    <ul id="playlist"></ul> 
</body> 

</html>

Из выше кода Js, нет необходимости использовать тэг формы. Потому что мы можем получить напрямую

источник

2014-12-22 07:26:27

Пожалуйста, почему этот код обновляет мою страницу после события onclick?

ответ

Смежные вопросы