Cannot set property of undefined error on button press

Question

I'm trying to change the background color of a div element on button press but I'm getting the error Cannot set property 'BackgroundColor' of undefined. The event handler for the button is inside the window.onload event. I thought at that point every element inside the html document would be loaded, but apparently not.

Here is the code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="random">This should become unreadable</div>
    <button id="button">Click me!</button>
    
    <script>
        window.onload = function() {
            document.getElementById("button").addEventListener('click', function() {
                document.getElementsByClassName("random").style.BackgroundColor= "black";
    
            });
        }
    </script>
    
    
    </body>
    </html>

`document.getElementsByClassName("random")` returns a HTMLCollection, not a single element - therefore `document.getElementsByClassName("random").style` is `undefined` ... perhaps `document.getElementsByClassName("random")[0].style ....` — Bravo, Aug 28 '21 at 09:15

score 0 · Answer 1 · answered Aug 28 '21 at 09:22

You can this out - getElementsByClassName produces error "undefined"

Another alternative could be this.

<body>
    <div id="random">This should become unreadable</div>
<button id="button">Click me!</button>

<script>
    window.onload = function() {
        document.getElementById("button").addEventListener('click', function() {
            document.getElementById("random").style.backgroundColor= "black";

        });
    }
</script>

score 0 · Answer 2 · answered Aug 28 '21 at 12:22

Modify the script as follows and try again:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="random">This should become unreadable</div>
    <button id="button">Click me!</button>
    
    <script>
        window.onload = function() {
            document.getElementById("button").addEventListener('click', function() {
                document.querySelector(".random").style.backgroundColor= "black";
    
            });
        }
    </script>
    
    
    </body>
    </html>

score 0 · Answer 3 · answered Aug 28 '21 at 16:05

Look into comments by @Bravo, document.getElementsByClassName("random") returns a HTMLCollection, not a single element - therefore document.getElementsByClassName("random").style is undefined

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="random">This should become unreadable</div>
    <button id="button">Click me!</button>

    <script>
      window.onload = function () {
        document
          .getElementById('button')
          .addEventListener('click', function () {
            const button = document.getElementsByClassName('random');
            for (let index = 0; index < button.length; index++) {
              const element = button[index];
              element.style.backgroundColor = 'black';
            }
            // if you will have only one element with class=random or if you only want to apply style to the first element with class=random, then 
            // button[0].style.backgroundColor = 'black';
            // in your case, you should add an id to the element and use id as the selector
          });
      };
    </script>
  </body>
</html>

Shan.M · Accepted Answer · 2021-08-28T16:40:54.410

try the following code segment. the issue is document.getElementsByClassName("random") returning an array of elements.So you should select one element from that array and get the style of that element. And BackgroundColor should be backgroundColor

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="random">This should become unreadable</div>
    <button id="button">Click me!</button>
    
    <script>
        window.onload = function() {
            document.getElementById("button").addEventListener('click', function() {
                document.getElementsByClassName("random")[0].style.backgroundColor= "black";
    
            });
        }
    </script>
    
    
    </body>
    </html>

Cannot set property of undefined error on button press

4 Answers4