Javascript kann die Taste nicht ändern die Farbe einer Box

Question

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

ändert nicht die Farbe der Box, wenn ich darauf klicke, wo ist der Fehler im Code?

Answer 1

Sie müssen .body löschen, da Sie bereits das Element mit der ID der Box, bevor es ausgewählt.

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

Answer 2

Verwenden Sie querySelector, um Ihre Elemente auszuwählen. Und behandeln Sie Klickereignis für Schaltfläche wie folgt.

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

Sie es tun wrong.There gibt zwei Möglichkeiten, dass

Erste ::

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

Zweite zu tun :: Wenn y ou haben Body-Tag in Ihrem DOM

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