# Confusion about how to use DOM correctly in JS

**URL:** <https://forum.freecodecamp.org/t/confusion-about-how-to-use-dom-correctly-in-js/396867>\
**Category:** General\
**Created:** [May 31, 2020, 12:43pm UTC](https://forum.freecodecamp.org/t/confusion-about-how-to-use-dom-correctly-in-js/396867 "2020-05-31T12:43:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ma3\_str0](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ma3_str0/32/147033_2.png) [@Ma3\_str0](https://forum.freecodecamp.org/u/Ma3_str0)\
**Post date:** [May 31, 2020, 12:43pm UTC](https://forum.freecodecamp.org/t/confusion-about-how-to-use-dom-correctly-in-js/396867/1 "2020-05-31T12:43:24Z")

</div>

So I’m trying to make a page with a single button that changes the background colour of the page but when I click the button nothing happens. And I don’t know what I’ve done wrong? Any help would be appreciated!

Regards  
Ma3\_str0

My JS and HTML code:

```auto
const colorArray = ['blue','red','orange','green','yellow','black'];

function changeColors(){

    document.body.style.backgroundColor = colorArray[Math.floor(Math.random() * colorArray.length)];

}

document.getElementById("click-button").onclick = changeColors();

```

```auto
<!DOCTYPE html>
<html>

    <head>
        <title>Change the background color!</title>

        <script src="app.js"></script>

        <style>
            #title{
                background-color: cadetblue;
                text-align: center;
                text-decoration: underline;
                color: coral;
                padding: 10px;
                
            }
            #centering{
                margin-top: 250px;
                text-align: center;
            }
            #click-button{
                padding: 25px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <h1 id="title">Change the background color of the page!</h1>
        <div id="centering">
            <button id="click-button">Click Me!</button>
        </div>
    </body>

</html>

```

---

<div class="post-metadata">

**Author:** ![singhshemona](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/singhshemona/32/147781_2.png) [@singhshemona](https://forum.freecodecamp.org/u/singhshemona)\
**Post date:** [May 31, 2020, 12:59pm UTC](https://forum.freecodecamp.org/t/confusion-about-how-to-use-dom-correctly-in-js/396867/2 "2020-05-31T12:59:02Z")

</div>

You’re setting the onclick handler for the button in the JS. Try setting it in the HTML instead, [like this](https://jsfiddle.net/5aj3nbuf/). I added `onclick="changeColors()"` to the button tag, and commented out the last line of your JS.

It’s helpful for you to look at the button itself in the HTML and see immediately what function it’s setting off, rather than wondering if you had done some scripting with that button and then trying to find it in the JS. Hopefully that makes sense 🙂

---

<div class="post-metadata">

**Author:** ![anon10857827](https://avatars.discourse-cdn.com/v4/letter/a/7feea3/32.png) [@anon10857827](https://forum.freecodecamp.org/u/anon10857827)\
**Post date:** [May 31, 2020, 12:59pm UTC](https://forum.freecodecamp.org/t/confusion-about-how-to-use-dom-correctly-in-js/396867/3 "2020-05-31T12:59:50Z")

</div>

What happens when you comment **#const colorArray** or you remove it?

---

<div class="post-metadata">

**Author:** ![Ma3\_str0](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ma3_str0/32/147033_2.png) [@Ma3\_str0](https://forum.freecodecamp.org/u/Ma3_str0)\
**Post date:** [May 31, 2020, 1:16pm UTC](https://forum.freecodecamp.org/t/confusion-about-how-to-use-dom-correctly-in-js/396867/4 "2020-05-31T13:16:03Z")

</div>

Thanks it works! I’ll rather use the attribute in the button tag in the future rather than trying to do it in JS. Thanks again for the help!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [May 31, 2020, 6:02pm UTC](https://forum.freecodecamp.org/t/confusion-about-how-to-use-dom-correctly-in-js/396867/5 "2020-05-31T18:02:42Z")

</div>

you can use event listeners  
try looking at those, instead of using `onclick`, to learn a different way of doing it

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [May 31, 2020, 6:38pm UTC](https://forum.freecodecamp.org/t/confusion-about-how-to-use-dom-correctly-in-js/396867/6 "2020-05-31T18:38:05Z")

</div>

1. You are running the function, you need to pass the function to `onclick` as a callback.

`document.getElementById("click-button").onclick = changeColors;`

1. Using [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) is preferable ([Why use addEventListener()?](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Why_use_addEventListener)).

> [@singhshemona](#):
>
> It’s helpful for you to look at the button itself in the HTML and see immediately what function it’s setting off, rather than wondering if you had done some scripting with that button and then trying to find it in the JS.

The reverse is just as true.

Using an inline handler you can’t see if it is attached to an element, or what element it is attached to, from inside the JavaScript.

I think any benefit of having inline event handlers are quickly overshadowed by the downsides. Personally, I would not recommend using inline handlers.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:51pm UTC](https://forum.freecodecamp.org/t/confusion-about-how-to-use-dom-correctly-in-js/396867/7 "2021-06-01T18:51:36Z")

</div>