开发者问题收集

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

2020-07-05
115
javascript html

我是 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>
3个回答

对于多个元素，您应使用 class 。 id 属性在页面内必须是唯一的 ，并且旨在作为引用一个 DOM 对象的唯一 id。您还需要遍历要对其执行操作的所有 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>
user120242
2020-07-05

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

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

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

scoochy
2020-07-05

我找到了问题的实际答案 

<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");
}
Milen Denev
2020-07-05