Button That When Clicked Will Display Hidden Column in HTML Table

Question

Quick question. I have a button defined as:

<input type='button' id='button' value='Development View' >

A div tag that encloses the following information:

echo "<div id = 'content' style='display:none'>";
    echo "<th>Development Status</th>";
echo "</div>";

Some JavaScript that runs whenever the button is clicked:

var button = document.getElementById('button'); // Assumes element with id='button'

button.onclick = function() {
     var div = document.getElementById('content');
     if (div.style.display !== 'none') {
         div.style.display = 'none';
     }
    else {
        div.style.display = 'block';
    }
};

My ultimate goal is to toggle the visibility of a column in a dynamic HTML table but I can't even get this simple header tag toggling. I do not get an error message but the button does nothing it seems. I am echoing out the HTML because this is a PHP script.

Answer 1

Wrap your javascript in a window.onload event

window.onload = function () {

  var button = document.getElementById('button'); // Assumes element with id='button'

  button.onclick = function() {
    var div = document.getElementById('content');
    if (div.style.display !== 'none') {
      div.style.display = 'none';
    }
    else {
      div.style.display = 'block';
    }
  }
};