使用 addEventListener 更改 DIV 的 CSS

Question

I have this HTML

<div class="content" id="content2">text<br></div>

and want to, for example, change CSS or just show Alert.

var chan = document.getElementById("content2");

if(chan){
  chan.addEventListener('click', function swapper() {
   alert('Ready!');
   //document.getElementById('content').style.display = "none";
})};

Why doesn't work? What I need to read?

Answer 1

I would prefer using some code like this to change the css styles at (eg) click-event:

 function addEventListener() { var element = document.getElementById("content2"); element.addEventListener('click', function swapper() { element.style.color = "red" // change the text color element.style.background = "black" // change the background color element.style.fontSize = "20px" // change the background color }) } window.onload = function() { addEventListener() }

 <div class="content" id="content2">click this text<br></div>

Edit: Keep in mind to use some unload-trigger (event) like window.onload to avoid issues:

window.onload = function() {

  // code to add event listeners, etc.

}

Answer 2

You should wrap your code in window.onload to make sure the DOM has loaded first before you attempt to manipulate it's elements.

 window.onload = function() { var chan = document.getElementById('content2') chan.addEventListener('click', function swapper() { alert('Ready!') }) }

 <div id="content2">Click me</div>