Fill table cells, but empty the backgroundcolor first?

Question

I am having a problem and i cant seem to solve it in my Javascript / CSS code.

I want to fill certain table cells background-color on a Buttonclick and with another button fill other cells with a different color, BUT "delete" the color from the first buttonclick first.

If I remove "fill_cellstransparent()" from the second Button it works, but cell [1] stays red and thats what i dont want.

anyone any idea?

EDIT: I kind of solved it, but does someone know how to give the cells ID's with letters, fe 1 and still works with function.fill_cellsred([A])? It doesnt seem to work if I use letters instead of numbers as cell id's.

Here is my first idea:

 function fill_cellsred($cells) { $cells.forEach(e => document.getElementById(e).classList.add('fillred')); } function fill_cellsgreen($cells) { $cells.forEach(e => document.getElementById(e).classList.add('fillgreen')); } function fill_cellstransparent($cells) { $cells.forEach(e => document.getElementById(e).classList.add('filltransparent')); }

 table td { border: 1px solid black; padding: 30px; }.fillred { background-color: red; }.fillgreen { background-color: green; }.filltransparent { background-color: transparent:; }

 <table> <tr> <td id="1">1</td> <td id="2">2</td> <td id="3">3</td> <td id="4">4</td> </tr> <tr> <td id="5">5</td> <td id="6">6</td> <td id="7">7</td> <td id="8">8</td> </tr> <tr> <td id="9">9</td> <td id="10">10</td> <td id="11">12</td> <td id="12">12</td> </tr> <tr> <td id="13">13</td> <td id="14">14</td> <td id="15">15</td> <td id="16">16</td> </tr> </table> <button onclick="fill_cellsred([1, 2, 3])">ROT</button> <button onclick="fill_cellstransparent(); fill_cellsgreen([2, 3, 5])">GRÜN</button>

Answer 1

I believe this is the working code

 function fill_cellsred(nums) { $cells = get_cells(nums); $cells.map(e => e.classList.add('fillred')); } function fill_cellsgreen(nums) { $cells = get_cells(nums); $cells.map(e => e.classList.add('fillgreen')); } function fill_cellstransparent() { $cells = get_cells(); $cells.map(e => e.classList.add('filltransparent')); } function get_cells(nums = []) { let $cells = document.querySelectorAll('table td'); // $cells_final will be array in the end // so let's make $cells also an array // so there will be less mistakes in future $cells = Array.from($cells); let $cells_final = []; // filter cells by num if(nums.length) { for(let i = 0; i < nums.length; i++) { $cell = $cells[nums[i] - 1]; if($cell) $cells_final.push($cell); } } else { $cells_final = $cells; } return $cells_final; }

 table td { border: 1px solid black; padding: 30px; }.fillred { background-color: red; }.fillgreen { background-color: green; }.filltransparent { background-color: transparent:; }

 <table> <tr> <td id="1">1</td> <td id="2">2</td> <td id="3">3</td> <td id="4">4</td> </tr> <tr> <td id="5">5</td> <td id="6">6</td> <td id="7">7</td> <td id="8">8</td> </tr> <tr> <td id="9">9</td> <td id="10">10</td> <td id="11">12</td> <td id="12">12</td> </tr> <tr> <td id="13">13</td> <td id="14">14</td> <td id="15">15</td> <td id="16">16</td> </tr> </table> <button onclick="fill_cellsred([1, 2, 3])">ROT</button> <button onclick="fill_cellstransparent(); fill_cellsgreen([2, 3, 5])">GRÜN</button>

Actually I think you should use e.style['background-color'] = 'green' instead of classes, or remove classes each time e => {e.classList.remove('fillgreen'); e.classList.remove('filltransparent'); e.classList.add('fillred')} e => {e.classList.remove('fillgreen'); e.classList.remove('filltransparent'); e.classList.add('fillred')} e => {e.classList.remove('fillgreen'); e.classList.remove('filltransparent'); e.classList.add('fillred')} ;

Answer 2

Rather than making transparent the element, the best way is to reset your element means you can remove the existing class.

Here is the updated code.

 function fill_cellsred($cells) { fill_cellstransparent() $cells.forEach(e => document.getElementById(e).classList.add('fillred')); } function fill_cellsgreen($cells) { fill_cellstransparent() $cells.forEach(e => document.getElementById(e).classList.add('fillgreen')); } function fill_cellstransparent() { document.querySelectorAll("table td").forEach(item=>item.classList=[]) }

 table td { border: 1px solid black; padding: 30px; }.fillred { background-color: red; }.fillgreen { background-color: green; }

 <table> <tr> <td id="1">1</td> <td id="2">2</td> <td id="3">3</td> <td id="4">4</td> </tr> <tr> <td id="5">5</td> <td id="6">6</td> <td id="7">7</td> <td id="8">8</td> </tr> <tr> <td id="9">9</td> <td id="10">10</td> <td id="11">12</td> <td id="12">12</td> </tr> <tr> <td id="13">13</td> <td id="14">14</td> <td id="15">15</td> <td id="16">16</td> </tr> </table> <button onclick="fill_cellsred([1, 2, 3])">ROT</button> <button onclick="fill_cellsgreen([2, 3, 5])">GRÜN</button>