java script событие

Проблема в поведении тега button.

В случае, если ему не указан type, по умолчанию используется type="submit". Если кнопка находится внутри тега form, то при клике на нее в таком случае будет осуществлена отправка формы и страница будет перезагружена.

Для решения проблемы можно воспользоваться одним из следующих путей:

1. Вынести кнопку из тега form.

   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. выставить атрибут type в значение 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. Отменить стандартное поведение, вызвав метод preventDefault()

   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> 
     

Если вписать return false; после строки list.appendChild(newLi); и скрипт закончится после добавления елемента.

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

У вас при нажатие на кнопку, происходит событие submit и браузер пытается отправить get запрос. Вам нужно отменить это событие.

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>