Style.display塊/無問題

-1

我打算在JavaScript中創建個人項目，直到遇到問題。我有一個「隱形」的表格，用css「style.display=none」，但是當我嘗試使其「可見」時，我得到「Uncaught TypeError：無法讀取null屬性'樣式'。Style.display塊/無問題

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>

來源

2014-02-06 user3268382

錯誤表明'document.getElementById （「list」）不是返回元素，而是返回null值。你可以做一個小提琴/演示嗎？如果元素與該ID一起存在，它應該沒問題，所以我沒有立即看到問題 – helion3

只是當我運行它時，'onload'工作。所以我的表是「不可見的」，但是當我點擊我的「攻擊」按鈕時，這是錯誤發生的時間。 – user3268382

我認爲錯誤與document.getElementById（「message」）。innerHTML =「」; – amudhan3093

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

問題是你replac e消息innerhtml on disappear.it刪除id爲list.so的表，所以我在td中創建了帶有id消息的div，並從td中刪除了消息ID。

來源

2014-02-06 04:55:17

它說> firebug中沒有定義火災 –

@srk是的它沒有函數叫fire.am只是修復他問的問題 –

由於'是不同表格的一部分。我應該複製/整理代碼嗎？ – user3268382

該錯誤是與 '的document.getElementById（「消息」）的innerHTML = 「」;' 沒有元件通過Id'message'.Remove它，它可以完美運行

來源

2014-02-06 04:44:06 amudhan3093

其他最佳做法是始終檢查該元素是否存在於DOM中：

類似如下：

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

來源

2014-02-06 04:50:11

'document.getElementById（「list」）。style.display =「none」;'在「onload」中工作正常。這是當我點擊「攻擊」按鈕，我得到的錯誤 – user3268382

是onload你首先將它設置爲顯示：無，當你點擊攻擊時，DOM中找不到該元素將其設置爲顯示：block，所以這元素/對象從來沒有在DOM中找到，因爲它被設置爲顯示：無 –

我可以請你推薦你使用jquery show（）;隱藏（）;或者切換功能。 –

嘗試不使用display:none通過Javascript支持，但是從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

來源

2014-02-06 05:37:42 JeansBolong

Style.display塊/無問題

回答

相關問題