0
273
ViewsChanging background color of HTML Table cell after Javascript Changes it
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!)
1 answers
Answer question0
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");
}