When I click on the button an element is created with the text and disappears abruptly.

What is the problem?

http://plnkr.co/edit/pTMdB3vkXE1epPFJ42xa?p=preview

<form> <input type="text" placeholder="to do" id="name"> <button id="button2">ДОБАВИТЬ </button> </form> <ol id="list"> </ol> <script> button2.onclick = function() { var newLi = document.createElement('li'); newLi.innerHTML = 'Привет, мир!'; list.appendChild(newLi); }; </script>
  • on the same page did in the console so var newLi = document.createElement ('li'); header.appendChild (newLi); and all the rules - Serge Esmanovich
  • This code works correctly for me - tCode
  • enter return false; after the line list.appendChild(newLi); - fonjeekay
  • Oh, I want to go back to the times when I was interested in such easy questions: 3 And not to solve charades with the context of the call in js. - VostokSisters
  • @VostokSisters oh, I want to go back to the times when the context of the call in js was a charade for me :) - Pavel Mayorov

4 answers 4

Problem in the behavior of the button tag.

If type is not specified for it, the default is type="submit" . If the button is inside the form tag, then when you click on it in this case, the form will be sent and the page will be reloaded.

To solve the problem, you can use one of the following ways:

  1. Move the button out of the form tag.

     button2.onclick = function() { var newLi = document.createElement('li'); newLi.innerHTML = 'Привет, мир!'; list.appendChild(newLi); }; 
     <input type="text" placeholder="to do" id="name"> <button id="button2">ДОБАВИТЬ</button> <ol id="list"> </ol>

  2. set type attribute to button

     button2.onclick = function() { var newLi = document.createElement('li'); newLi.innerHTML = 'Привет, мир!'; list.appendChild(newLi); }; 
     <form> <input type="text" placeholder="to do" id="name"> <button type="button" id="button2">ДОБАВИТЬ</button> </form> <ol id="list"> </ol>

  3. Cancel the default behavior by calling the preventDefault() method

     button2.onclick = function(e) { e.preventDefault(); var newLi = document.createElement('li'); newLi.innerHTML = 'Привет, мир!'; list.appendChild(newLi); }; 
     <form> <input type="text" placeholder="to do" id="name"> <button id="button2">ДОБАВИТЬ</button> </form> <ol id="list"> </ol>

  • It seems to me that it is better to leave the button, but to listen to the submit event on the form, because submit has a number of advantages, for example, pressing the enter button on the text input - Umer
  • @Umer, not sure if you need a form here. - Grundy

If you enter return false; after the line list.appendChild(newLi); and the script will end after adding the item.

 <script> button2.onclick = function() { var newLi = document.createElement('li'); newLi.innerHTML = 'Привет, мир!'; list.appendChild(newLi); return false; }; </script>

    When you click a button, the submit event occurs and the browser tries to send a get request. You need to cancel this event.

     const button2 = document.querySelector('#button2'); button2.onclick = function(e) { e.preventDefault(); var newLi = document.createElement('li'); newLi.innerHTML = 'Привет, мир!'; list.appendChild(newLi); }; 
     <form> <input type="text" placeholder="to do" id="name"> <button id="button2">ДОБАВИТЬ </button> </form> <ol id="list"> </ol>

    • where is submit ? - tCode
    • 2
      @tCode, the default value of the type attribute of the button is submit - Grundy
    • @Grundy thanks for the clarification, did not know - tCode
    • @Grundy if the button in the form .. - C.Raf.T
    • @ C.Raf.T, what if the button in the form ? - Grundy
     <input type="text" placeholder="to do" value="" id="name"> <button id="button2">ДОБАВИТЬ </button>
    button2.onclick = function () {var newLi = document.createElement ('li'); newLi.innerHTML = document.getElementById ('name'). value; list.appendChild (newLi); };