Style.display 块/无问题答案

【问题标题】：Style.display block/none problemsStyle.display 块/无问题
【发布时间】：2014-02-06 04:31:47
【问题描述】：

我本来打算用 JavaScript 做一个个人项目，直到遇到问题。我有一个带有 css“style.display=none”的“不可见”表，但是当我尝试使其“可见”时，我得到“未捕获的类型错误：无法读取 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>

【问题讨论】：

该错误表明document.getElementById("list") 没有返回元素，而是返回一个空值。你能做一个小提琴/演示吗？如果元素以该 ID 存在，应该没问题，所以我不会立即看到问题
只有当我运行它时，onload 才有效。所以我的桌子是“不可见的”，但是当点击我的“攻击”按钮时，就会出现错误。
我认为错误在于 document.getElementById("message").innerHTML="";
您的代码中缺少元素“消息”
它在里面。它就在身体下方。

标签： javascript html css

【解决方案1】：

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

代码

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

问题是您在消失时替换了消息 innerhtml。它删除了具有 id 列表的表。所以我在 td 内创建带有 id 消息的 div 并从 td 中删除消息 id。

【讨论】：

它说 > fire 没有在 firebug 中定义
@srk 是的，它没有名为 fire.am 的功能。我只是解决他的要求
这不起作用，因为<td id="message" colspan="2" background="backgrounds/backgroundText.png"> 是不同表的一部分。我应该复制/粘贴整个代码吗？
@user3268382 粘贴完整的html
问题是你在消失时替换了消息 innerhtml。所以它删除了具有 id 列表的表

【解决方案2】：

错误在于'document.getElementById("message").innerHTML="";'。Id 'message'没有元素。删除它，它可以正常工作

【讨论】：

【解决方案3】：

另一个最佳实践是始终检查元素是否存在于 DOM 中：

如下所示：

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

【讨论】：

document.getElementById("list").style.display="none"; 在“onload”中工作正常。当我点击“攻击”按钮时，我得到了错误
是的 onload 你首先将它设置为 display:none 并且当你点击攻击时在 DOM 中找不到元素来设置它为 display: block, 所以这个元素/对象永远不会在 DOM 中找到因为它被设置为显示：无
我可以推荐你使用 Jquery show();隐藏（）;或切换功能。

【解决方案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

【讨论】：