的document.getElementById到document.write後，現有的元素返回null

以下是完整的錯誤消息：的document.getElementById到document.write後，現有的元素返回null

mlg.html:41 Uncaught TypeError: Cannot set property 'innerHTML' of null 
    at ml (mlg.html:41) 
    at HTMLButtonElement.onclick (mlg.html:9)

我是在填字遊戲，我只是做了一個快速測試，以發現問題和然後我偶然發現了這個問題。下面是代碼：

<!DOCTYPE html> 
<html> 

<head> 
</head> 

<body> 
    <button type="button" onclick="ml()">Mad Libs!</button> 
    <p id="display"></p> 

    <script> 
    function ml() { 
     var x = Math.floor((Math.random() * 10) + 1); 

     //mad lib 1 
     if (x == 1 || 2) { 
     document.write("test1"); 
     } 
     //mad lib 2 
     if (x == 3 || 4) { 
     document.write("test2"); 
     } 
     //mad lib 3 
     if (x == 5 || 6) { 
     document.write("test3"); 
     } 
     //mad lib 4 
     if (x == 7 || 8) { 
     document.write("test4"); 
     } 
     //mad lib 5 
     if (x == 9 || 10) { 
     document.write("test5"); 
     } 
     document.getElementById("display").innerHTML = x; 
    } 
    </script> 
</body> 
</html>

來源

2017-01-07 Pranv Gupta

問題在於'document.write'覆蓋了整個頁面的內容，因此在達到該語句時不會有'＃display'元素。另外'x == 1 || 2'應該是'x == 1 || x == 2'。 – Xufox

相關：http://stackoverflow.com/q/12471249/4642212 – Xufox

不要使用document.write，這是bad practice。它用test1或一些類似的字符串覆蓋整個頁面。因此，當達到document.getElementById("display").innerHTML = x;時，將不再存在ID爲display的元素，並且document.getElementById("display")將評估爲null。

如果要測試if語句，請改爲使用console.log("test1");。只需在大多數瀏覽器中打開browser console（F12），您就會在那裏看到消息。

說到你的if報表：they’re wrong。 if(test == 1 || 2)將始終評估爲true，因爲2是truthy。這不是你想要的。你想要的是if(test == 1 || test == 2)。

替代品：if([1, 2].includes(test)),if([1, 2].indexOf(test) >= 0)（Check variable equality against a list of values）。

來源

2017-01-07 02:34:35 Xufox

的document.getElementById到document.write後，現有的元素返回null

回答

相關問題