Question

This is my script :

window.onload = function (){  
   var title = document.getElementsByTagName('h1')[0].id = "heading1";  
   document.getElementById(title).onclick = function (e){  
          var para = this.nextSibling.style.display = 'block';  
          var newVal = (para == "block") ? "none" : "block";  
          alert(newVal);  
   }  
}  

The result I need is for the alert value to toggle from block to none and back. But I am always getting “none”. What is the problem with my code?

Answer 1

window.onload = function () {
  var firstH1 = document.getElementsByTagName('h1')[0];
  firstH1.id = "heading1";
  firstH1.onclick = function() {
    var currentValue = this.nextSibling.style.display;
    this.nextSibling.style.display = (currentValue == "none") ? "block" : "none";
  }
} 

Note a few things: I simplified your element fetching because it doesn’t make sense to fetch an element, assign it an id, then use that id to find that same element again.

I also switched block/none ordering, because if no style is displayed then it would be blank — and your first click would assign block to it – and it would not disappear. This way it does.