Question

我计划用JavaScript制作个人项目，直到遇到问题为止。我有一个“隐形”的表与css“style.display=none”，但当我试图让它“可见”时，我得到“未捕获的TypeError：无法读取属性'样式'的null”。

下面的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：

<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>

Answer 1

错误是'document.getElementById（“message”）。innerHTML =“”;'。没有元素通过Id'消息'。移除它，它完美地运作

Answer 2

另一种最佳做法是始终检查DOM中是否存在元素：

如下所示：

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

Answer 3

演示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>";
}

问题是你在disappear上替换消息innerhtml。删除有id list的表。所以我在td中创建带有id消息的div并从td中删除消息id。

Answer 4

尝试不要通过Javascript使用display:none，但是从css开始，这里是您的代码中的示例我在下面的链接上修改了一下

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

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

jsfiddle

Style.display阻止/无问题

4 个答案: