如何修复“未捕获的类型错误：无法读取 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

对于多个元素，您应该使用一个类。&nbsp;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>&nbsp; function actionButtonfuction() {&nbsp; &nbsp; for(const el of document.getElementsByClassName("actionButton"))&nbsp; &nbsp; &nbsp; el.disabled = true;&nbsp; &nbsp; document.getElementById("play").style.color = "#808080";&nbsp; &nbsp; document.getElementById("stop").style.color = "#808080";&nbsp; &nbsp; document.getElementById("restart").style.color = "#808080";&nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; for(const el of document.getElementsByClassName("actionButton"))&nbsp; &nbsp; &nbsp; &nbsp; el.disabled = false;&nbsp; &nbsp; &nbsp; document.getElementById("play").style.color = "#16a72d";&nbsp; &nbsp; &nbsp; document.getElementById("stop").style.color = "#db3224";&nbsp; &nbsp; &nbsp; document.getElementById("restart").style.color = "#1b6ec2"&nbsp; &nbsp; }, 5000);&nbsp; &nbsp; //console.log("button clicked");&nbsp; }</script><button class="console_button actionButton" onclick="actionButtonfuction()" asp-action="">&nbsp; <i id="stop" class="fa fa-stop"></i></button><button class="console_button actionButton" onclick="actionButtonfuction()" asp-action="">&nbsp; &nbsp;<i id="play" class="fa fa-play"></i></button><button class="console_button actionButton" onclick="actionButtonfuction()" asp-action="">&nbsp; &nbsp;<i id="restart" class="fa fa-refresh"></i></button>

Answer 2

首先，所有按钮都具有相同的 ID，这是不允许的，因为 ID 应该是唯一的。play其次，在您的代码中，没有 idstop或restart. 我认为要使您的代码正常工作，它应该是这样的：<script>&nbsp; &nbsp; function actionButtonfuction() {&nbsp; &nbsp; &nbsp; &nbsp; var btns = document.getElementsByClassName('actionButton');&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i < btns.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btns[i].setAttribute('disabled','true');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("play").style.color = "#808080";&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("stop").style.color = "#808080";&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("restart").style.color = "#808080";&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var btns = document.getElementsByClassName('actionButton');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i < btns.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btns[i].setAttribute('disabled','true');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("play").style.color = "#16a72d";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("stop").style.color = "#db3224";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("restart").style.color = "#1b6ec2"&nbsp; &nbsp; &nbsp; &nbsp; }, 5000);&nbsp; &nbsp; }</script>对于 HTML：<button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="stop" asp-action="">&nbsp; &nbsp;<i class="fa fa-stop"></i></button><button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="play" asp-action="">&nbsp; &nbsp;<i class="fa fa-play"></i></button><button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="restart" asp-action="">&nbsp; &nbsp;<i class="fa fa-refresh"></i></button>所以完全像这样：<!DOCTYPE HTML><html>&nbsp; <head>&nbsp; &nbsp; <title>Buttons</title>&nbsp; </head>&nbsp; <body>&nbsp; <button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="stop" asp-action="">&nbsp; &nbsp;<i class="fa fa-stop"></i></button><button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="play" asp-action="">&nbsp; &nbsp;<i class="fa fa-play"></i></button><button class="console_button" class="actionButton" onclick="actionButtonfuction()" id="restart" asp-action="">&nbsp; &nbsp;<i class="fa fa-refresh"></i></button>&nbsp; <script>&nbsp; &nbsp; function actionButtonfuction() {&nbsp; &nbsp; &nbsp; &nbsp; var btns = document.getElementsByClassName('actionButton');&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i < btns.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btns[i].setAttribute('disabled','true');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("play").style.color = "#808080";&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("stop").style.color = "#808080";&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("restart").style.color = "#808080";&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var btns = document.getElementsByClassName('actionButton');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i < btns.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;btns[i].setAttribute('disabled','false');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("play").style.color = "#16a72d";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("stop").style.color = "#db3224";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("restart").style.color = "#1b6ec2"&nbsp; &nbsp; &nbsp; &nbsp; }, 5000);&nbsp; &nbsp; }</script>&nbsp; </body></html>请注意我没有测试过代码。

Answer 3

我找到了问题的实际答案<script>function actionButtonfuction() {&nbsp; &nbsp; for (const el of document.getElementsByClassName("actionButton"))&nbsp; &nbsp; &nbsp; &nbsp; el.disabled = true;&nbsp; &nbsp; if (typeof (document.getElementById("play")) != 'undefined' && document.getElementById("play") != null) {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("play").style.color = "#808080";&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; if (typeof (document.getElementById("stop")) != 'undefined' && document.getElementById("stop") != null) {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("stop").style.color = "#808080";&nbsp; &nbsp; }&nbsp; &nbsp; if (typeof (document.getElementById("restart")) != 'undefined' && document.getElementById("restart") != null) {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("restart").style.color = "#808080";&nbsp; &nbsp; }&nbsp; &nbsp; setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; for (const el of document.getElementsByClassName("actionButton"))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.disabled = false;&nbsp; &nbsp; &nbsp; &nbsp; if (typeof (document.getElementById("play")) != 'undefined' && document.getElementById("play") != null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("play").style.color = "#16a72d";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (typeof (document.getElementById("stop")) != 'undefined' && document.getElementById("stop") != null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("stop").style.color = "#db3224";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (typeof (document.getElementById("restart")) != 'undefined' && document.getElementById("restart") != null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("restart").style.color = "#1b6ec2"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, 5000);&nbsp; &nbsp; //console.log("button clicked");}