如何修复“未捕获的类型错误：无法读取 null 的属性‘样式’”的错误

Question

我是 web 开发的新手，实际上我对 js 几乎一无所知。我正在尝试“禁用” 3 个按钮，然后单击它们 5 秒钟。我的 ID 是正确的，但它只给我这个错误stop和restart按钮/i。它适用于play.Error that I got -> Uncaught TypeError: Cannot read property 'style' of null    at actionButtonfuction (Website:145)    at HTMLButtonElement.onclick (Website:179)在单个函数中可以设置多少个项目的样式是否有任何限制？<script>  function actionButtonfuction() {    document.getElementById("actionButton").disabled = true;    document.getElementById("play").style.color = "#808080";    document.getElementById("stop").style.color = "#808080";    document.getElementById("restart").style.color = "#808080";    setTimeout(function() {      document.getElementById("actionButton").disabled = false;      document.getElementById("play").style.color = "#16a72d";      document.getElementById("stop").style.color = "#db3224";      document.getElementById("restart").style.color = "#1b6ec2"    }, 5000);    //console.log("button clicked");  }</script><button class="console_button" onclick="actionButtonfuction()" id="actionButton" asp-action="">  <i id="stop" class="fa fa-stop"></i></button><button class="console_button" onclick="actionButtonfuction()" id="actionButton" asp-action="">   <i id="play" class="fa fa-play"></i></button><button class="console_button" onclick="actionButtonfuction()" id="actionButton" asp-action="">   <i id="restart" class="fa fa-refresh"></i></button>

Answer 1

对于多个元素，您应该使用一个类。 id 属性在页面中必须是唯一的，并且被设计为唯一的 id 以引用一个 DOM 对象。您还需要遍历所有要操作的 DOM 对象。

我已将 actionButton 添加到每个按钮的类中，并使用getElementsByClassName来获取所有按钮，并使用for-of 循环对它们进行迭代。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<script>

  function actionButtonfuction() {

    for(const el of document.getElementsByClassName("actionButton"))

      el.disabled = true;

    document.getElementById("play").style.color = "#808080";

    document.getElementById("stop").style.color = "#808080";

    document.getElementById("restart").style.color = "#808080";

    setTimeout(function() {

      for(const el of document.getElementsByClassName("actionButton"))

        el.disabled = false;

      document.getElementById("play").style.color = "#16a72d";

      document.getElementById("stop").style.color = "#db3224";

      document.getElementById("restart").style.color = "#1b6ec2"

    }, 5000);

    //console.log("button clicked");

  }

</script>

<button class="console_button actionButton" onclick="actionButtonfuction()" asp-action="">

  <i id="stop" class="fa fa-stop"></i>

</button>

<button class="console_button actionButton" onclick="actionButtonfuction()" asp-action="">

   <i id="play" class="fa fa-play"></i>

</button>

<button class="console_button actionButton" onclick="actionButtonfuction()" asp-action="">

   <i id="restart" class="fa fa-refresh"></i>

</button>

Answer 2

首先，所有按钮都具有相同的 ID，这是不允许的，因为 ID 应该是唯一的。play其次，在您的代码中，没有 idstop或restart. 我认为要使您的代码正常工作，它应该是这样的：

<script>

    function actionButtonfuction() {

        var btns = document.getElementsByClassName('actionButton');

        for(var i = 0; i < btns.length; i++) {

           btns[i].setAttribute('disabled','true');

        }

        document.getElementById("play").style.color = "#808080";

        document.getElementById("stop").style.color = "#808080";

        document.getElementById("restart").style.color = "#808080";

        setTimeout(() => {

            var btns = document.getElementsByClassName('actionButton');

            for(var i = 0; i < btns.length; i++) {

               btns[i].setAttribute('disabled','true');

            }

            document.getElementById("play").style.color = "#16a72d";

            document.getElementById("stop").style.color = "#db3224";

            document.getElementById("restart").style.color = "#1b6ec2"

        }, 5000);

    }

</script>

对于 HTML：

<button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="stop" asp-action="">

   <i class="fa fa-stop"></i>

</button>

<button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="play" asp-action="">

   <i class="fa fa-play"></i>

</button>

<button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="restart" asp-action="">

   <i class="fa fa-refresh"></i>

</button>

所以完全像这样：

<!DOCTYPE HTML>

<html>

  <head>

    <title>Buttons</title>

  </head>

  <body>

  <button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="stop" asp-action="">

   <i class="fa fa-stop"></i>

</button>

<button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="play" asp-action="">

   <i class="fa fa-play"></i>

</button>

<button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="restart" asp-action="">

   <i class="fa fa-refresh"></i>

</button>

  <script>

    function actionButtonfuction() {

        var btns = document.getElementsByClassName('actionButton');

        for(var i = 0; i < btns.length; i++) {

           btns[i].setAttribute('disabled','true');

        }

        document.getElementById("play").style.color = "#808080";

        document.getElementById("stop").style.color = "#808080";

        document.getElementById("restart").style.color = "#808080";

        setTimeout(() => {

            var btns = document.getElementsByClassName('actionButton');

            for(var i = 0; i < btns.length; i++) {

               btns[i].setAttribute('disabled','false');

            }

            document.getElementById("play").style.color = "#16a72d";

            document.getElementById("stop").style.color = "#db3224";

            document.getElementById("restart").style.color = "#1b6ec2"

        }, 5000);

    }

</script>

  </body>

</html>

请注意我没有测试过代码。

Answer 3

我找到了问题的实际答案

<script>

function actionButtonfuction() {

    for (const el of document.getElementsByClassName("actionButton"))

        el.disabled = true;

    if (typeof (document.getElementById("play")) != 'undefined' && document.getElementById("play") != null) {

        document.getElementById("play").style.color = "#808080";

    } 

    if (typeof (document.getElementById("stop")) != 'undefined' && document.getElementById("stop") != null) {

        document.getElementById("stop").style.color = "#808080";

    }

    if (typeof (document.getElementById("restart")) != 'undefined' && document.getElementById("restart") != null) {

        document.getElementById("restart").style.color = "#808080";

    }

    setTimeout(function () {

        for (const el of document.getElementsByClassName("actionButton"))

            el.disabled = false;

        if (typeof (document.getElementById("play")) != 'undefined' && document.getElementById("play") != null) {

            document.getElementById("play").style.color = "#16a72d";

        }

        if (typeof (document.getElementById("stop")) != 'undefined' && document.getElementById("stop") != null) {

            document.getElementById("stop").style.color = "#db3224";

        }

        if (typeof (document.getElementById("restart")) != 'undefined' && document.getElementById("restart") != null) {

            document.getElementById("restart").style.color = "#1b6ec2"

        }

    }, 5000);

    //console.log("button clicked");

}