Javascript не может изменить название кнопки

Question

document.getElementById("button2").addEventListener("click", function({ 
    document.getElementById("box").body.style.backgroundColor = "Blue"; 
}); 

не меняет цвет коробки, когда я нажимаю на нее, где ошибка в коде?

Answer 1

Вам нужно будет удалить .body, так как вы уже выбрали элемент с идентификатором окна перед ним.

document.getElementById("button2").addEventListener(
    "click", 
    function(){ 
     document.getElementById("box").style.backgroundColor = "Blue"; 
    } 
); 

Answer 2

Используйте querySelector, чтобы выбрать ваш elements.And ручка для кнопки, как это событие нажмите.

var btn = document.querySelector("#button2");//select your button 
 
btn.addEventListener('click',function(){//handle click event 
 
document.querySelector("#box").style.backgroundColor="Blue";//select box id and set background 
 
});

<button id="button2"/>Click</button> 
 
<p id="box"> 
 
change color 
 
</p>

Answer 3

Вы делаете это wrong.There два способа сделать это

Первый ::

document.getElementById("button2").addEventListener(
 
     "click", 
 
     function(){ 
 
      document.getElementById("box").style.backgroundColor = "Blue"; 
 
     } 
 
    );

Второе :: Если Y НУ есть тело тега в вашем DOM

document.body.getElementById("button2").addEventListener(
 
     "click", 
 
     function(){ 
 
      document.getElementById("box").style.backgroundColor = "Blue"; 
 
     } 
 
    );