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

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

javascript

使用Javascript有条件地更改列表项属性,javascript,Javascript,我是javascript的超级初学者，所以请原谅我，如果这是非常基本的，但我有几个小时的时间寻找解决方案，无法找出我做错了什么。基本上，如果满足特定条件，我想隐藏由id=“change”项标识的单个列表项。然而，下面的javascript代码似乎没有做任何事情，因为“隐藏我”列表项继续出现 <script> var x = 1; if(x == 1) { document.getElementById("change").style.display

我是javascript的超级初学者，所以请原谅我，如果这是非常基本的，但我有几个小时的时间寻找解决方案，无法找出我做错了什么。基本上，如果满足特定条件，我想隐藏由id=“change”项标识的单个列表项。然而，下面的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>


var x=1；
如果（x==1）{
document.getElementById（“更改”）.style.display=“无”；
}
.default{显示：块；}

演示给我看
隐藏我

将

移动到底部，它应该可以工作。原因是，您正在尝试操作尚未呈现的DOM元素

标准做法是在页面底部包含所有脚本/脚本文件，以防止出现此问题：

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


.default{显示：块；}

演示给我看
隐藏我

var x=1；
如果（x==1）{
document.getElementById（“更改”）.style.display=“无”；
}

将

移动到底部，它应该可以工作。原因是，您正在尝试操作尚未呈现的DOM元素

标准做法是在页面底部包含所有脚本/脚本文件，以防止出现此问题：

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


.default{显示：块；}

演示给我看
隐藏我

var x=1；
如果（x==1）{
document.getElementById（“更改”）.style.display=“无”；
}

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

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

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

这是因为脚本在最开始的时候，在任何html之前，特别是在具有“change”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>


.default{显示：块；}

演示给我看
隐藏我

var x=1；
如果（x==1）{
document.getElementById（“更改”）.style.display=“无”；
}

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

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

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

这是因为脚本在最开始的时候，在任何html之前，特别是在具有“change”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>


.default{显示：块；}

演示给我看
隐藏我

var x=1；
如果（x==1）{
document.getElementById（“更改”）.style.display=“无”；
}

在StackSnippet中编写代码时，代码会按预期工作；'“隐藏我”被隐藏，“显示我”仍然可见。也许您未能正确引用JavaScript文件？或者您是否在HTML文件中编写了JavaScript，如上所示？因为在这种情况下，在您尝试将元素作为目标时，它不会被创建；）您的代码（如图所示！）无法工作，因为脚本块在该元素进入DOM之前运行，因此

document.getElementById（“change”）

为

null

-检查browser developer tools控制台，您将看到指向该行的错误，关于null没有属性样式的内容。。。尝试将

块移动到

..

块之后在StackSnippet中写入代码时，代码会按预期工作；'“隐藏我”被隐藏，“显示我”仍然可见。也许您未能正确引用JavaScript文件？或者您是否在HTML文件中编写了JavaScript，如上所示？因为在这种情况下，在您尝试将元素作为目标时，它不会被创建；）您的代码（如图所示！）无法工作，因为脚本块在该元素进入DOM之前运行，因此

document.getElementById（“change”）

为

null

-检查browser developer tools控制台，您将看到指向该行的错误，关于null没有属性样式的内容。。。尝试将

块移动到

块之后