javascript - Style.display block/none problems -
i planning on making personal project javascript until encountered problem. have table that's "invisible" css "style.display=none" when try make "visible" "uncaught typeerror: cannot read property 'style' of null".
javascript code below:
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="<center>wild slayerzach has appeared.</center>"; } html below:
<body onload="disappear()"> <table border="1" > <tr> <td><img id="shp" src="hp/hpslayerzach/hp2.png"/></td> <td></td> <td><img src="characters/slayerzach/slayerzach.png"/></td> </tr> <tr> <td><p id="demo"></p></td> <td ><img id="att" src="backgrounds/spacer1.png"/></td> <td></td> </tr> <tr> <td><img align="right" src="characters/fighterdan13/fighterdan13.gif"/></td> <td></td> <td><img id="fhp" src="hp/hpfighterdan13/hp1.png"/></td> </tr> <tr> <td id="message" colspan="2" background="backgrounds/backgroundtext.png"> <center><table border="0" id="list"> <tr> <td style="font-family:verdana;font-size:15px"><center><a onclick="fire()">fire</a></center></td> <td style="font-family:verdana;font-size:15px"><center>lightning</center></td> </tr> <tr> <td style="font-family:verdana;font-size:15px"><center>water</center></td> <td style="font-family:verdana;font-size:15px"><center>earth</center></td> </tr> </table></center> </td> <td> <center><table border="0" background="backgrounds/backgroundmenu.png"> <tr> <td><button id="butatt" onclick="attack()">attack</button></td> <td><button id="butitems" disabled>items</button></td> </tr> <tr> <td colspan="2"><center><button id="butrun" style="width:110px; height:25px;" disabled>run</button><center></td> </tr> </table></center> </td> </tr> </table> </body>
demo fiddle
html
<body onload="disappear()"> <table border="1" > <tr> <td><img id="shp" src="hp/hpslayerzach/hp2.png"/></td> <td></td> <td><img src="characters/slayerzach/slayerzach.png"/></td> </tr> <tr> <td><p id="demo"></p></td> <td ><img id="att" src="backgrounds/spacer1.png"/></td> <td></td> </tr> <tr> <td><img align="right" src="characters/fighterdan13/fighterdan13.gif"/></td> <td></td> <td><img id="fhp" src="hp/hpfighterdan13/hp1.png"/></td> </tr> <tr> <td colspan="2" background="backgrounds/backgroundtext.png"> <center><table border="0" id="list"> <tr> <td style="font-family:verdana;font-size:15px"><center><a onclick="fire()">fire</a></center></td> <td style="font-family:verdana;font-size:15px"><center>lightning</center></td> </tr> <tr> <td style="font-family:verdana;font-size:15px"><center>water</center></td> <td style="font-family:verdana;font-size:15px"><center>earth</center></td> </tr> </table></center> <div id="message"></div> </td> <td> <center><table border="0" background="backgrounds/backgroundmenu.png"> <tr> <td><button id="butatt" onclick="attack()">attack</button></td> <td><button id="butitems" disabled>items</button></td> </tr> <tr> <td colspan="2"><center><button id="butrun" style="width:110px; height:25px;" disabled>run</button><center></td> </tr> </table></center> </td> </tr> </table> </body> 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="<center>wild slayerzach has appeared.</center>"; } problem replace message innerhtml on disappear.it remove table have id list.so create div id message inside td , remove message id td.
Comments
Post a Comment