title: Style.display block/none problems
body: <p>I was planning on making a personal project with JavaScript until I encountered a problem. I have a table that's "Invisible" with css "<code>style.display=none</code>" but when I try to make it "visible" I get "Uncaught TypeError: Cannot read property 'style' of null".</p>
  
  <p>JavaScript Code below:</p>
  
  <pre><code>    function attack(){
          document.getElementById("list").style.display="block";
          document.getElementById("message").innerHTML="";
      }
      function fire(){    
          var y=document.getElementById("message");   
          var x=document.getElementById("demo");
          var z=document.getElementById("att");
          x.innerHTML=3;
     }
  function disappear(){
      document.getElementById("list").style.display="none";   
      document.getElementById("message").innerHTML="&lt;center&gt;Wild SlayerZach has appeared.&lt;/center&gt;";
  }
  </code></pre>
  
  <p>HTML below:</p>
  
  <pre><code>&lt;body onload="disappear()"&gt;
      &lt;table border="1" &gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;img id="SHP" src="Hp/HPSlayerzach/hp2.png"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;img src="characters/slayerzach/slayerzach.png"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;p id="demo"&gt;&lt;/p&gt;&lt;/td&gt;
              &lt;td &gt;&lt;img id="att" src="backgrounds/spacer1.png"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;img align="right" src="characters/fighterdan13/fighterDan13.gif"/&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;img id="FHP" src="hp/HPFighterdan13/hp1.png"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td id="message" colspan="2" background="backgrounds/backgroundText.png"&gt;
                  &lt;center&gt;&lt;table border="0" id="list"&gt;
                      &lt;tr&gt;
                          &lt;td style="font-family:verdana;font-size:15px"&gt;&lt;center&gt;&lt;a onclick="fire()"&gt;FIRE&lt;/a&gt;&lt;/center&gt;&lt;/td&gt;
                          &lt;td style="font-family:verdana;font-size:15px"&gt;&lt;center&gt;LIGHTNING&lt;/center&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td style="font-family:verdana;font-size:15px"&gt;&lt;center&gt;WATER&lt;/center&gt;&lt;/td&gt;
                          &lt;td style="font-family:verdana;font-size:15px"&gt;&lt;center&gt;EARTH&lt;/center&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;&lt;/center&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;center&gt;&lt;table border="0" background="backgrounds/backgroundmenu.png"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;button id="butAtt" onclick="attack()"&gt;Attack&lt;/button&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;button id="butItems" disabled&gt;Items&lt;/button&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td colspan="2"&gt;&lt;center&gt;&lt;button id="butRun" style="width:110px; height:25px;" disabled&gt;Run&lt;/button&gt;&lt;center&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;&lt;/center&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;      
  &lt;/body&gt;
  </code></pre>