Reset button isn't functional

Hello everyone ! Hope you're doing well

I've made a webpage which is similar to a sketchpad, I am working on making a reset button which clears everything on the sketch area which is a grid with an Id of "container" . I've made the button in html . In javascript, I did this function : document.getElementsByClassName("reset-btn").onclick=

function cleargrid() {
document.getElementsByClassName(“grid-item”).reset();
};
cleargrid();
but it’s not working, am I making a mistake?
Here’s the code:

.reset() is to clear input fields in <form> element.

1 Like

Thank you for informing me that !
So would removeItem work to clear grids in my case ?

  1. You can not call cleargrid() as it has not been defined in the code as a function, only as a callback to the onclick handler.

  2. document.getElementsByClassName("grid-item") returns a HTMLCollection, it does not have a .reset() method on it. A HTMLCollection is an array-like structure.

I would suggest you defined the function as a stand-alone function and pass it to the event handler. In the function, you can iterate over all the grid-item elements and maybe just reset the styles on them.

function cleargrid() {
  document.querySelectorAll('.grid-item').forEach(item => item.style = '')
}

document.querySelector(".reset-btn").addEventListener('click', cleargrid);
1 Like

yeap you may do as above or here is my code (don’t forget to add id to HTML for reset button)

//reset button
let resetBtn=document.getElementById("reset")
reset.addEventListener("click",clearGrid)
function clearGrid(){
  let arrayGrid=[...document.querySelectorAll(".grid-item")]
  arrayGrid.forEach(grid=>grid.style.backgroundColor="white")
}

clearGrid();
2 Likes

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).


Edit:

let resetBtn=document.getElementById("reset")
reset.addEventListener("click", clearGrid)

Don’t you mean?

resetBtn.addEventListener("click", clearGrid)
1 Like

yes,thank you very much!

1 Like

Thank you so much @lasjorg !! It worked :white_heart:
This is my first project with DOM and javaScript , I am having some confusion in understanding the way this works.
If you have time, can you please explain what’s that specific code that made the computer understand the action “erasing” , so I understand now calling the items by queryselector, but my question is those erasing or making new grid functions how do they work, and how do I write them ?

@gusakmarina I thank you deeply for your comment ! I’ve tried it as well and it worked ! :love_letter:
So in your solution, did you make a function that actually turn the colors to their original background theme (white)?
I am amazed by the verity of ways one problem can be solved by

@lasjorg I actually had some problems with writing the code !! This is soooo helpful , thank you for editing my post, I will take a look at the post you’ve recommended , hopefully next time my code would be more clear to read.

The code just loops all the elements with the grid-item class and removes the inline styles (the black background added on hover) by setting the style property to an empty string. This means the .grid-item class in the CSS will take effect again. It is basically doing the same as you are doing for the hover but just removing the inline styles.

You can also set the inline styles to white but then the .grid-item CSS class isn’t really used except for the initial styles. Personally, I would suggest removing the inline styles is the better option.

1 Like

yes, when you click the reset button it turns the background back to white.
Sometimes I try different approaches to the same problem and then find the best solution fully satisfying all my requirements.

1 Like