Changing background color of HTML Table cell after Javascript Changes it

Question

I have an HTML table that outputs like this: (It's manually built in HTML and styled with CSS via classes rowStyle1 and rowStyle2)

When the user clicks the buttons for next week or previous week, the page loads a schedule and, if there is any datapoint to load into the table, it both puts the text in the cell and changes the background color with this code:

 document.getElementById(cellID).innerText = parsed.title
 document.getElementById(cellID).style.backgroundColor = "#cc00cc"

The problem is, when the user wants to change weeks, the table should be "cleared out", and made ready for the new data. That doesn't happen even though I put this code at the beginning of the function that triggers when either button is pressed:

let cells = document.getElementsByClassName("rowStyle1")

for (let i = 0; i < cells.length; i++) {
    cells[i].style.backgroundColor = "#ffffff"
}

let cells2 = document.getElementsByClassName("rowStyle2")

for (let i = 0; i < cells2.length; i++) {
    cells2[i].style.backgroundColor = "#d8ebfa"
}

I know this code works, because I can change the colors of the cells when the page first loads using this code, but it still leaves a colored cell left over when I change weeks:

How do I change the color of the cell back so I can "reset" the table to get ready for the new data? Does it have something to do with setting the color via javascript?

(BTW, this whole code has been written in native HTML, CSS, and JavaScript, so any solutions that don't involve any plug-ins would be greatly appreciated!)

RoToRa · Accepted Answer · 2022-03-23 07:52:49Z

1

It's generally a bad idea to set styles directly with JavaScript. It is usually better to set a class, ...

(NB: Don't repeatedly look for element references, but store it):

const cell = document.getElementById(cellID);
cell.innerText = parsed.title
cell.classList.add("highlighted");

... and the all you need to do is remove that class again, when you reset:

for (let i = 0; i < cells.length; i++) {
  cells[i].classList.remove("highlighted");
}

edited Mar 23, 2022 at 7:52

answered Mar 21, 2022 at 19:37

RoToRa

38.5k12 gold badges72 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeff Cournoyer Over a year ago

Thanks! That worked! But one random question: what does "NB" stand for?

RoToRa Over a year ago

en.wiktionary.org/wiki/NB#Phrase

Collectives™ on Stack Overflow

Changing background color of HTML Table cell after Javascript Changes it

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related