Javascriptでボタンの色を変えることができない

Question

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

私がクリックするとボックスの色が変わることはありません。コードのどこに誤りがありますか？

Answer 1

すでにIDのボックスのある要素を選択しているので、.bodyを削除する必要があります。

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

Answer 2

querySelectorを使用して要素を選択します。このようなボタンのクリックイベントを処理します。あなたはそれをやっている

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

は、次の2つの方法wrong.Thereであること

まず::

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

セカンド::もしy OUあなたのDOM

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