I want to Change multiple to colors on mouse click in an individual cell in a table

My goal is to cycle through the colors; White, Green, Yellow, and Red in individual table cells on a mouse click. I'm trying to use a simple online assessment of various elements and send screenshots to a mentor. This is the code I used for two colors (White, Green).

var cells = document.querySelectorAll("td");

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener("click", function() {
    this.className = this.className == "white" ? "green" : "white";
  });
}
.green {
  background: green;
  color: white;
}

.white {
  background: white;
  color: black;
}

#sales-list {
  border: 1px solid black;
}

td {
  padding: 10px;
  border: 1px solid black;
}
<table id="sales-list">
  <tr>
    <td class="white">Row 1 Col 1</td>
    <td class="white">Row 1 Col 2</td>
    <td class="white">Row 1 Col 3</td>
  </tr>
  <tr>
    <td class="white">Row 2 Col 1</td>
    <td class="white">Row 2 Col 2</td>
    <td class="white">Row 2 Col 3</td>
  </tr>
  <tr>
    <td class="white">Row 3 Col 1</td>
    <td class="white">Row 3 Col 2</td>
    <td class="white">Row 3 Col 3</td>
  </tr>
</table>



Read more here: https://stackoverflow.com/questions/68478682/i-want-to-change-multiple-to-colors-on-mouse-click-in-an-individual-cell-in-a-ta

Content Attribution

This content was originally published by Chuck Deb Wood at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: