JavaScript for changing a
colour from a button press

Question

I'm a little unsure why my code doesn't seem to be working when my html and JS code are within the same file. When the html and JS are separate, seems to be working fine. Can someone point out the error in my ways....I'm a newbie!!

HTML:

<div class="main">
    <div class="light"></div>
    <button onclick="chngCol()" id="burn">Burn!</button>
</div>

JavaScript:

chngCol() {
    if(document.getElementByClass('light').style.background == "#00ffff")
      { 
       document.getElementByClass('light').style.background = "#ffff00"; 
      } 
       else if(document.getElementByClass('light').style.background == "ffff00")
      {
       document.getElementByClass('light').style.background = "#ff00ff"; 
      }
       else if(document.getElementByClass('light').style.background == "#ff00ff")
      { 
       document.getElementByClass('light').style.background = "#00ffff";       
      }
   }

CSS:

    .light{
        width: 50px;
        height: 50px;
        background-color:#00ffff;
    }

All code is in the same document with the appropriate tags and however the error i'm getting in Chrome Console on the first { after calling chngCol.

There's no jQuery in the code posted, and `document.getElementByClass()` does not exist. — Pointy, Oct 11 '19 at 14:06
and `chngCol() {` is not valid JS. Either `function chngCol() {` OR `const chngCol = () => {` — mplungjan, Oct 11 '19 at 14:08
I cannot believe I missed it, thank you @mplungjan I forgot function BEFORE!!! Thank you all! — Sunny0101, Oct 11 '19 at 14:12
Also, if the style is set in the stylesheet `.style` not get it - you will need `getComputedStyle` - https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle — Pete, Oct 11 '19 at 14:13
Thanks @Pete I'll take a look at that now, however if CSS was external as it normally would be, I guess the .style would be ok? — Sunny0101, Oct 11 '19 at 14:14
https://stackoverflow.com/questions/2664045/how-to-get-an-html-elements-style-values-in-javascript — Pete, Oct 11 '19 at 14:20

mplungjan · Accepted Answer · 2019-10-11T14:19:20.113

There are a multitude of issues.

chngCol() { is not valid JS. Either function chngCol() { OR const chngCol = () =>
You need document.getElementsByClassName("light")[0] OR better, document.querySelector(".light")
You cannot read the background color of the element if it is not set in script first.

I think you meant to do this:

let cnt = 0;
const colors = ["#00ffff", "#ffff00", "#ff00ff"];
const chngCol = () => {
  cnt++;
  if (cnt >= colors.length) cnt = 0; // wrap
  document.querySelector('.light').style.background = colors[cnt]; // use the array
}
document.getElementById("burn").addEventListener("click", chngCol);

.light {
  width: 50px;
  height: 50px;
  background-color: #00ffff;
}

#burn {
  width: 150px;
  font-weight: 700;
}

<div class="main">
  <div class="light"></div>
  <button id="burn">Burn!</button>
</div>

Thank you @mplungjan I took your 2nd bullet point and worked :-) — Sunny0101, Oct 11 '19 at 14:25
@K.Haydock You are welcome. Do please study my example since it is unobtrusive and DRY (don't repeat yourself) — mplungjan, Oct 11 '19 at 14:29

Andres Abadia · Answer 2 · 2019-10-11T14:30:24.857

0

The document.getElementByClass selector is an array selector. In order to select your element you should select the first element of the array. Try this instead:

document.getElementsByClassName('light')[0].style.background

edited Oct 11 '19 at 14:30

answered Oct 11 '19 at 14:15

Andres Abadia

817
7
14

2

Should this not be `getElementsByClassName` - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName – Pete Oct 11 '19 at 14:21

JavaScript for changing a colour from a button press

2 Answers2

JavaScript for changing a
colour from a button press