Use of IDs and Classes issues in javascript

Question

I'm new to Javascript and currently pulling my out my hair, because of an issue I don´t know how to resolve!

I'm trying to make a circle change its color based on a number that it is getting from my "Paragraph tag". When I used ID´s on my page I manage to make it work.

(function() {
  var Antal = document.getElementById("myP").innerHTML;

  if (Antal >= 6) {
    document.getElementById("centerbox1").style.backgroundColor = 'Green';
  } else
  if (Antal >= 1 && Antal < 5) {
    document.getElementById("centerbox1").style.backgroundColor = 'yellow';
  } else
  if (Antal <= 0) {
    document.getElementById("centerbox1").style.backgroundColor = 'red';
  }
})();

<div id="centerbox1" style="width:90px; height:90px; border-radius:50%;">
  <div>
    <p id="myP">1</p>
  </div>
</div>

But since I need it to repeat itself again and again, I can't use ID and I want to switch the code to use "class" instead.

If I switch all my IDs to classes instead, the code no longer works.

(function() {
  var Antal = document.getElementsByClassName('myP').innerHTML;


  if (Antal >= 6) {
    document.getElementsByClassName('centerbox1').style.backgroundColor = 'Green';
  } else
  if (Antal >= 1 && Antal < 5) {
    document.getElementsByClassName("centerbox1").style.backgroundColor = 'yellow';
  } else
  if (Antal <= 0) {
    document.getElementByClassName("centerbox1").style.backgroundColor = 'red';
  }
});

<div class="centerbox1">
  <div>
    <p class="myP">1</p>
  </div>
</div>

Now, this might be because of some very basic issue, but I hope someone can help me out since I'm kind of stuck at this.

Thanks in advance!

Answer 1

the solution here is quite simple really.

Remember when working with getElementsByClassName, javascript will return an array as there can be multiple classes. The solution is to use getElementsByClassName[0] as this will specifically return the first element that has that class in the array, obviously this also allows you to then specify which class you want to apply that to.

Answer 2

You can traverse the centerboxes and then find the p tag inside each box. Based on the p tag you can color the centerbox.

HTML

<div class="centerbox">
  <div>
    <p>1</p>
  </div>
</div>
<div class="centerbox">
  <div>
    <p>3</p>
  </div>
</div>

CSS

.centerbox {
  width:90px; 
  height:90px; 
  border-radius:50%;
}

JS

let boxes = document.getElementsByClassName("centerbox")
for(let i = 0;i<boxes.length;i++){
  let box = boxes.item(i)
  let content = box.getElementsByTagName("p")[0].innerHTML
  let number = Number(content)
  if(number > 1) {
    box.style.backgroundColor = "green"
  }
}

You don't really need the anonymous function but if you want that, you need to add () at the end to make it auto-execute

(function() {
  console.log("executing!");
})();