1. 首页
  2. 问题列表
  3. 如何修复“未捕获的TypeError:无法读取NULL的属性'style'”错误
提问者：小点点

如何修复“未捕获的TypeError:无法读取NULL的属性'style'”错误


我是web开发的新手，实际上我对JS几乎一无所知。

我试图“禁用”3个按钮，然后他们被点击5秒。 我的ID是正确的，但它只会给我stop和restart按钮/I带来此错误。 它为播放工作罚款。

Error that I got -> Uncaught TypeError: Cannot read property 'style' of null
    at actionButtonfuction (Website:145)
    at HTMLButtonElement.onclick (Website:179)

在一个函数中有多少项可以被样式化的限制吗？

null

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

null


共3个答案

匿名用户

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

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

null

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

匿名用户

首先，您的所有按钮都有相同的ID，这是不允许的，因为ID应该是唯一的。 其次，在您的代码中没有类似于play，stopp或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>

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

匿名用户

我找到了问题的真正答案

<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");
}

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS