有條件地使用Javascript更改列表項目屬性

我是一名超級初學者，所以如果這是非常基本的原則，但我有幾個小時尋找解決方案，無法弄清楚我做錯了什麼。基本上，如果滿足特定條件，我想隱藏由id =「change」項標識的單個列表項。然而，它似乎並沒有像下面的JavaScript代碼做什麼，因爲「隱藏我」列表項繼續出現。有條件地使用Javascript更改列表項目屬性

<script> 
     var x = 1; 
     if(x == 1) { 
     document.getElementById("change").style.display = "none"; 
     } 
</script> 


<style> 
    .default{display: block;} 
</style> 

<ul> 
    <li class="default">Show Me</li> 
    <li id="change" class="default">Hide Me</li> 
</ul>

來源

2017-07-03 bdn711

將代碼寫入StackSnippet時，代碼將按預期工作; '隱藏我'隱藏起來，'顯示我'仍然可見。也許你沒有正確引用你的JavaScript文件？或者，您是否已經在HTML文件的**內部編寫了JavaScript **，如上所示？因爲在這種情況下，元素不會在您嘗試定位它時創建;） –

您的代碼（如圖所示）不起作用，因爲腳本塊在該元素位於DOM中之前正在運行，因此'document.getElementById（「change」）''爲'' - 檢查瀏覽器** developer **工具控制檯，你會看到一個指向該行的錯誤，關於null的東西沒有屬性風格...嘗試在'

...'塊之後移動'

將<script>移到底部，它應該工作。原因是，您正在嘗試操作尚未呈現的DOM元素。

這是標準的做法，包括在<body>頁面底部的所有腳本/腳本文件來避免此問題：調試代碼是嘗試和看到的錯誤開始的地方

<body> 
    <style> 
     .default{display: block;} 
    </style> 

    <ul> 
     <li class="default">Show Me</li> 
     <li id="change" class="default">Hide Me</li> 
    </ul> 

    <script> 
     var x = 1; 
     if(x == 1) { 
      document.getElementById("change").style.display = "none"; 
     } 
    </script> 
</body>

來源

2017-07-03 23:07:16 FuriousD

相關問題