How can i make the clear button work properly on this code?

Question

I’m trying to do a simple program to fill some divs and I need a reset button to be able to clear all divs filled with content, so the user could input on divs all over again. Here is my code:


// **reset function**:
const clearAll = document.getElementsByClassName("clear");
clearAll.addEventListener('click', clearCells);

function clearCells(){
  for (let i = 0; i < cells.length; i++){
    cells[1] = "green";
  }
}

Sorry for the noob question, still trying to figure some things out.

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Ivar, Dec 02 '20 at 20:53
Just like the result of your `document.querySelectorAll`, you need to loop over the elements returned by `document.getElementsByClassName`, because it returns a collection instead of a single element. (Or use `document.querySelector('.clear')` if there is only one.) — Ivar, Dec 02 '20 at 20:55
Really appreciate you guys trying to help. But did not had any success with the code. Here is the code on fiddle. https://jsfiddle.net/Drecot/yqopha6t/ — Skribznet, Dec 02 '20 at 21:17
@Skribznet Did you read my previous comment? Your Fiddle still has the exact same issue I addressed. — Ivar, Dec 02 '20 at 22:07
Also by setting `cell.className = 'white'` you are removing the `cell` class it had earlier, causing the css for `.cell` not to be applied anymore which means all cells are collapsed (0x0 pixels). — Ivar, Dec 02 '20 at 22:10

score 1 · Accepted Answer · answered Dec 02 '20 at 23:26

        //default color
        let fillColor = "red";

        //select all colors
        const colorDivs = document.querySelectorAll(".colors");
        //listen to all colors if one of them clicked 
        colorDivs.forEach(function (color) {
            color.addEventListener("click", pickColor);
        })
        //take the color of it and put it in fillColor
        function pickColor(event) {
          fillColor = event.target.style.backgroundColor;
        }

        //select all colors
        const cells = document.querySelectorAll(".cell");
        //listen to all cells if one of them clicked 
        cells.forEach(function (cell) {
            cell.addEventListener("click", paintCell);
        })
        //color it with the fillColor picked
        function paintCell(event) {
          event.target.style.backgroundColor=fillColor;
        }

        //get the button clear All
        const clearAll = document.getElementsByClassName("clear")[0];
        //if clicked
        clearAll.addEventListener('click', clearCells);
        //set all cells to white color
        function clearCells(){
          for (let i = 0; i < cells.length; i++){
            cells[i].style.backgroundColor = "white";
          }
        }

table, tr, td {
            font-size: 24px;
            border: 1px solid black;
            border-collapse: collapse;
        }
        td {
            height: 70px;
            width: 80px;
            text-align: center;
            cursor: pointer;
        }
        .colors{
            width: 50px;
            height: 50px;
            display: inline-block;
            cursor: pointer;
        }
        button{
          background-color: #4CAF50; /* Green */
          border: none;
          color: white;
          padding: 15px 32px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
          margin: 4px 2px;
          cursor: pointer;
          font-size: 24px;
        }

<div class="colors" style="background-color: red"></div>
    <div class="colors" style="background-color: green"></div>
    <div class="colors" style="background-color: blue"></div>
    <table>
        <tr>
            <td class='cell'>cell 1</td>
            <td class='cell'>cell 2</td>
            <td class='cell'>cell 3</td>
        </tr>
        <tr>
            <td class='cell'>cell 4</td>
            <td class='cell'>cell 5</td>
            <td class='cell'>cell 6</td>
        </tr>
    </table>
    <button class="clear">clear all</button>

That's just an awesome work mate. Thank you. – Skribznet Dec 02 '20 at 23:38 — Skribznet, Dec 02 '20 at 23:38

user2258152 · Answer 2 · 2020-12-02T22:23:40.777

0

Edit

getElementsByClassName return an array of element with class clear so you need to get the first one or your function will never get call

const clearAll = document.getElementsByClassName("clear")[0];
clearAll.addEventListener('click', clearCells);

First fix

cells[i].className = 'cell'

edited Dec 02 '20 at 22:23

answered Dec 02 '20 at 21:02

user2258152

635
5
13

The code doesn’t seem to work. You can check jsfiddle.net/Drecot/yqopha6t – Skribznet Dec 02 '20 at 22:00
you are missing [0] at the end of document.getElementsByClassName("clear") – user2258152 Dec 02 '20 at 22:04
Thanks for the help mate. Yes, the button does clear all the cells, but for some reason, doesn't allow for any activity after that. My intent is to just clear the content of the cells but be able to continue painting cells after that. – Skribznet Dec 02 '20 at 22:14
Yes like @Ivar said cell.className = 'white' remove the cell class so that's why it does not have any activity after the clear. Quick fix would be to use cell.className = 'cell' – user2258152 Dec 02 '20 at 22:22

cape_bsas · Answer 3 · 2020-12-03T22:14:28.860

0

The error is in the last part.

Change this

    // **reset function**:
    const clearAll = document.getElementsByClassName("clear");
    clearAll.addEventListener('click', clearCells);
    
    function clearCells(){
        for (let i = 0; i < cells.length; i++){
            cells[1] = "white";
        }
    }

For this:

    // **reset function**:
    document.getElementsByClassName("clear").forEach(function (cell) {
            cell.addEventListener('click', clearCells);
    });

    function clearCells(){
        cells.forEach(function (cell) {
            cell.className = 'white';
        });
    }

edited Dec 03 '20 at 22:14

answered Dec 02 '20 at 21:05

cape_bsas

638
5
13

It's seems to be valid js, nevertheless it doesn't solve the issue. – Skribznet Dec 02 '20 at 22:02
Try it now, I've corrected the code. BTW, you don't need to vote down if the answer isn't right. We're helping you out here. – cape_bsas Dec 03 '20 at 22:16
Hello mate, thanks a lot for the help, I truly appreciate. I'm sorry for the downvote, that was not me. I don’t even have the option to post scores. “Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post score.” – Skribznet Dec 08 '20 at 10:15
No problem man, I'm sorry for the bias. Did you solve this issue? – cape_bsas Dec 09 '20 at 15:47

How can i make the clear button work properly on this code?

3 Answers3