Question

我是一个使用javascript的超级初学者，请原谅我，如果这是非常基本的，但我已经好几个小时寻找解决方案而且无法弄清楚我做错了什么。基本上，我想要隐藏由id =＆＃34;更改＆＃34;标识的单个列表项。如果满足特定条件，则为项目。但是，看起来下面的javascript代码并没有像＃34; Hide Me＆＃34;列表项继续出现。

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

Answer 1

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

Answer 2

调试代码的一种方法是尝试查看错误的开始位置。现在，尝试运行以下代码：

alert(document.getElementById("change"));

通过这样做，您将看到它输出“null”，这意味着它无法找到id为“change”的任何内容。

这是因为脚本在您的任何html之前，特别是在具有“更改”ID的项目之前的最开始。您希望将整个脚本部分移动到最后，如下所示：

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

使用Javascript有条件地更改列表项属性

2 个答案: