How can I fix an error of "Uncaught TypeError: Cannot read property 'style' of null"

Question

I am new in web developing, and actually I don't know almost nothing about js.

I am trying to "disable" 3 buttons and then they are clicked for 5 seconds. I have got the Id's right but it gives me this error only for the stop and restart button/i. It work fines for play.

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

Is there any limitation for how many items can be styled in single function?

<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

I found the actual answer to my problem

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

Answer 2

First, all your buttons have the same ID, which is not allowed because IDs are supposed to be unique. Second, in your code there is nothing like an id of play, stop or restart. I’m thinking that for your code to work, it should be like this:

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

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

So altogether like this:

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

Please do take note that I’ve not tested the code.

Answer 3

For multiple elements you should use a class. id attributes must be unique within a page and is designed as a unique id to reference one DOM object. You also need to iterate over all the DOM objects you want to act on.

I have added actionButton to the class of each button, and used getElementsByClassName to get all of them, and a for-of loop to iterate over them.

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