Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Style.display Block/none Problems

Post a Comment
I was planning on making a personal project with JavaScript until I encountered a problem. I have a table that's 'Invisible' with css 'style.display=none' but when I try to make it

Solution 1:

Demo FIDDLE

HTML

<bodyonload="disappear()"><tableborder="1" ><tr><td><imgid="SHP"src="Hp/HPSlayerzach/hp2.png"/></td><td></td><td><imgsrc="characters/slayerzach/slayerzach.png"/></td></tr><tr><td><pid="demo"></p></td><td ><imgid="att"src="backgrounds/spacer1.png"/></td><td></td></tr><tr><td><imgalign="right"src="characters/fighterdan13/fighterDan13.gif"/></td><td></td><td><imgid="FHP"src="hp/HPFighterdan13/hp1.png"/></td></tr><tr><tdcolspan="2"background="backgrounds/backgroundText.png"><center><tableborder="0"id="list"><tr><tdstyle="font-family:verdana;font-size:15px"><center><aonclick="fire()">FIRE</a></center></td><tdstyle="font-family:verdana;font-size:15px"><center>LIGHTNING</center></td></tr><tr><tdstyle="font-family:verdana;font-size:15px"><center>WATER</center></td><tdstyle="font-family:verdana;font-size:15px"><center>EARTH</center></td></tr></table></center><divid="message"></div></td><td><center><tableborder="0"background="backgrounds/backgroundmenu.png"><tr><td><buttonid="butAtt"onclick="attack()">Attack</button></td><td><buttonid="butItems"disabled>Items</button></td></tr><tr><tdcolspan="2"><center><buttonid="butRun"style="width:110px; height:25px;"disabled>Run</button><center></td></tr></table></center></td></tr></table></body>

CODE

functionattack(){
        document.getElementById("list").style.display="block";
        document.getElementById("message").innerHTML="";
    }
    functionfire(){    
        var y=document.getElementById("message");   
        var x=document.getElementById("demo");
        var z=document.getElementById("att");
        x.innerHTML=3;
   }
functiondisappear(){
    document.getElementById("list").style.display="none";   
    document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared.</center>";
}

Problem was you replace the message innerhtml on disappear.it remove the table which have id list.so i create div with id message inside the td and remove message id from the td.

Solution 2:

The error is with 'document.getElementById("message").innerHTML="";'.There is no element by Id 'message'.Remove it,it works perfectly

Solution 3:

The other best practice is to always check whether the element exists in the DOM:

something like below:

if(document.getElementById("message")){ 
        document.getElementById("list").style.display="none";
document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared</center>";
    }

Solution 4:

try dont use display:none through Javascript but from css, here is the example from your code i modify it a bit on link below

HTML Code

<body><tdid="message"colspan="2"background="backgrounds/backgroundText.png" ><tableborder="0"id="list"style="display:none;"><tr><tdstyle="font-family:verdana;font-size:15px"><center><aonclick="fire()">FIRE</a></center></td><tdstyle="font-family:verdana;font-size:15px"><center>LIGHTNING</center></td></tr><tr><tdstyle="font-family:verdana;font-size:15px"><center>WATER</center></td><tdstyle="font-family:verdana;font-size:15px"><center>EARTH</center></td></tr></table><buttonid="butAtt"onclick="attack()">Attack</button>

Javascript

functionattack(){
    document.getElementById("list").style.display="block";
    document.getElementById("message").innerHTML="";
}

jsfiddle

Post a Comment for "Style.display Block/none Problems"