javascript Style.display 块/无问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21594042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style.display block/none problems
提问by user3268382
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 "visible" I get "Uncaught TypeError: Cannot read property 'style' of null".
我正计划用 JavaScript 制作一个个人项目，直到遇到问题。我有一个带有 css“ style.display=none”的“不可见”表，但是当我尝试使其“可见”时，我得到“未捕获的类型错误：无法读取 null 的属性‘样式’”。
JavaScript Code below:
下面的 JavaScript 代码：
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:
下面的 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 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>
回答by amudhan3093
The error is with 'document.getElementById("message").innerHTML="";'.There is no element by Id 'message'.Remove it,it works perfectly
错误是'document.getElementById("message").innerHTML="";'。Id 'message' 没有元素。删除它，它完美地工作
回答by Sunil Kumar
The other best practice is to always check whether the element exists in the DOM:
另一个最佳实践是始终检查元素是否存在于 DOM 中：
something like below:
像下面这样：
if(document.getElementById("message")){
document.getElementById("list").style.display="none";
document.getElementById("message").innerHTML="<center>Wild SlayerZach has appeared</center>";
}
回答by P.Sethuraman
Demo FIDDLE
演示小提琴
HTML
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 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.
问题是你在消失时替换了消息innerhtml。它删除了具有id列表的表。所以我在td内创建带有id消息的div并从td中删除消息id。
回答by JeansBolong
try dont use display:nonethrough Javascript but from css, here is the example from your code i modify it a bit on link below
尝试不要display:none通过 Javascript 而是通过 css 使用，这是您代码中的示例，我在下面的链接上对其进行了一些修改
HTML Code
HTML代码
<body>
<td id="message" colspan="2" background="backgrounds/backgroundText.png" >
<table border="0" id="list" style="display:none;">
<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>
<button id="butAtt" onclick="attack()">Attack</button>
Javascript
Javascript
function attack(){
document.getElementById("list").style.display="block";
document.getElementById("message").innerHTML="";
}
