Front End Development Libraries Projects - Build a Random Quote Machine

Tell us what’s happening:
Describe your issue in detail here.
I wants to change the background color of the body every time button is clicked but it reverts back to original color after refreshing the page itself.
Every time i clicked the button: color changes, pages refreshes, page revert back to original state.

Your code so far
const color = [‘red’, ‘blue’, ‘green’]
const body = document.querySelector(‘body’);
const newQuote = document.querySelector(‘#new-quote’); //button
let index = 0;

newQuote.addEventListener(‘click’, () => {

  if (index > color.length) {
               index = 0
      }
  body.style.backgroundColor  =  color[index]
  index += 1
}

)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

Hey!
it’s standard browser behavior to reset all of the data when you refresh your page. if you need persistent data(data that stays stored even when you close the browser or the tab) you can use browser facilities like “localStorage”. here’s how to do that:

Hope this helps! :smile:

Please post all your code. Preferably on something like Codepen.

If the page is refreshing on the button click then the button is most likely inside a form element and it becomes a submit button. You can pass the event object to the handler and call event.preventDefault() inside the click handler to prevent the default action of submitting the form.

thank you for your reply actually the problem was anchor tag , i put the button inside it