Ok, here a simple code, which changes td class when you click on them:
const btn = document.getElementsByTagName("input")[0]; btn.addEventListener("click", function(event){ let cells = document.getElementsByTagName("td"); for (let i=0; i<cells.length; i++) { cells[i].classList = "" }; CounterCells(); }) const tabl = document.getElementsByTagName("table")[0]; tabl.addEventListener("click", function(event){ if (event.target.classList == ""){ event.target.classList.add("green"); console.log("Nothing to green"); } else if (event.target.classList.contains("white")){ event.target.classList.replace("white", "green"); console.log("White to green"); } else if (event.target.classList.contains("green")){ event.target.classList.replace("green", "red"); console.log("Green to red"); } else if (event.target.classList.contains("red")) { event.target.classList.replace("red", "white"); console.log("Red to white"); } CounterCells(); }) function CounterCells() { let cells = document.getElementsByTagName("td"); let countWhites = 0; let countGreens = 0; let countReds = 0; for (let i=0; i<cells.length; i++) { if (cells[i].classList == "") { countWhites++ } if (cells[i].classList.contains("white")) { countWhites++ } if (cells[i].classList.contains("green")) { countGreens++ } if (cells[i].classList.contains("red")) { countReds++ } } const p = document.getElementById("demo"); p.innerHTML = "Whites: "+countWhites+"<br> Greens: "+countGreens+"<br> Reds: "+countReds; }
table { border-collapse: collapse; } td { border: 1px solid grey; width: 2rem; height: 2rem; text-align: center; cursor: pointer; user-select: none; } .green { background-color: green; } .red { background-color: red; } .white { background-color: white; }
<input type="button" value="Reset"> <br> <br> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> <p id="demo"></p>
If you click it — anything works fine, but now try to click on cell number one and drag mouse over cell number three and then release mouse button — class will be assigned to tr not to last td number 3.
Why is that?
https://jsfiddle.net/foxnadir/Ls6p7j1z/3/
Advertisement
Answer
The problem in your code was that you were attaching the click
event to the table element, when only one td can be clicked at a time.
I also changed the event from click
to mousedown
so that when the user drags from 1 to 3, 1 changes color, but if this behavior is not what you wanted, you can change it back.
Here is the working code:
const btn = document.getElementsByTagName("input")[0]; btn.addEventListener("click", function(event) { let cells = document.getElementsByTagName("td"); for (let i = 0; i < cells.length; i++) { cells[i].classList = "" }; CounterCells(); }) let cells = document.getElementsByTagName("td"); for (i = 0; i < cells.length; i++) { cells[i].addEventListener("mousedown", function(event) { if (event.target.classList == "") { event.target.classList.add("green"); console.log("Nothing to green"); } else if (event.target.classList.contains("white")) { event.target.classList.replace("white", "green"); console.log("White to green"); } else if (event.target.classList.contains("green")) { event.target.classList.replace("green", "red"); console.log("Green to red"); } else if (event.target.classList.contains("red")) { event.target.classList.replace("red", "white"); console.log("Red to white"); } CounterCells(); }) } function CounterCells() { let countWhites = 0; let countGreens = 0; let countReds = 0; for (let i = 0; i < cells.length; i++) { if (cells[i].classList == "") { countWhites++ } if (cells[i].classList.contains("white")) { countWhites++ } if (cells[i].classList.contains("green")) { countGreens++ } if (cells[i].classList.contains("red")) { countReds++ } } const p = document.getElementById("demo"); p.innerHTML = "Whites: " + countWhites + "<br> Greens: " + countGreens + "<br> Reds: " + countReds; }
table { border-collapse: collapse; } td { border: 1px solid grey; width: 2rem; height: 2rem; text-align: center; cursor: pointer; user-select: none; } tr { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } td { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .green { background-color: green; } .red { background-color: red; } .white { background-color: white; }
<input type="button" value="Reset"> <br> <br> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> <p id="demo"></p>