CODEWITHSUNDEEP
javascripthtmlcss
Euzergnaym
Euzergnaym

Reputation: 23

I would like to click an image in a div that refreshes the page and hides the div after refresh

EDIT 2

CONTEXT

I am using a semi-transparent image with a top-margin off-set to disable access to quiz content until the page is refreshed.

The code below works perfectly, on one page, one time:

JavaScript

window.addEventListener('DOMContentLoaded', (event) => { //document ready event
  //question element (to show/hide)
  const question1Elm = document.querySelector('#question-1');
  //localStorage element that gets the item with key question1Clicked
  const question1Clicked = window.localStorage.getItem('question1Clicked');
  //check if localStorage has item with key question1Clicked
  if (question1Clicked) { 
    //if found, hide element
    question1Elm.classList.add('quiz-lock-d-none');
  } else {
    // if not found, show element
    question1Elm.classList.add('quiz-lock');
    question1Elm.addEventListener('click', (event) => { //span click event
      // set localStorage item, key=question1Clicked, value=1
      window.localStorage.setItem('question1Clicked', '1')
      window.location.reload(); //reload
    });
  }
});

CSS

.quiz-lock img {
  margin-top: -235px;
}
.quiz-lock img:hover {
    margin-top: -235px;
    cursor: pointer;
}
.quiz-lock-d-none {
  display: none;
}

HTML

[quiz shortcode]
<span id="question-1" class="quiz-lock">
<img src="images/lock-panel.png" />
</span>

There are 57 sections with a pre and post quiz on each. Multiple sections can be completed in a single sitting. The quiz lock needs to function on every section page individually.

When I incorporated the Set/Get for multiple elements detailed by naveen, the code looks like this:

window.addEventListener('DOMContentLoaded', (event) => { //document ready event
  //question element (to show/hide)
  const question1Elm = document.querySelector('#question-1');
  const clickedQuestions = JSOn.parse(localStorage.getItem('clickedQuestions')); //array
  //check if localStorage has item with key question1Clicked
  if (question1Clicked) { 
    //if found, hide element
    question1Elm.classList.add('quiz-lock-d-none');
  } else {
    // if not found, show element
    question1Elm.classList.add('quiz-lock');
    question1Elm.addEventListener('click', (event) => { //span click event
      window.localStorage.setItem('clickedQuestions', JSON.stringify([1, 3, 5))
      window.location.reload(); //reload
    });
  }
});

But breaks the functionality altogether. I am obviously doing something wrong.

Thank you for your time.

Upvotes: 0

Views: 82

Answers (1)

codeandcloud
codeandcloud

Reputation: 55248

To persist a value across reload you have to use either sessionStorage / localStorage

Pseudo Code

HTML

<span id="question-1" class="quiz-lock">
    <img src="https://dummyimage.com/200x40/fff/aaa"/>
</span>

JavaScript

window.addEventListener('DOMContentLoaded', (event) => { //document ready event
  //question element (to show/hide)
  const question1Elm = document.querySelector('#question-1');
  //localStorage element that gets the item with key question1Clicked
  const question1Clicked = window.localStorage.getItem('question1Clicked');
  //check if localStorage has item with key question1Clicked
  if (question1Clicked) { 
    //if found, hide element
    question1Elm.classList.add('quiz-lock-d-none');
  } else {
    // if not found, show element
    question1Elm.classList.add('quiz-lock');
    question1Elm.addEventListener('click', (event) => { //span click event
      // set localStorage item, key=question1Clicked, value=1
      window.localStorage.setItem('question1Clicked', '1')
      window.location.reload(); //reload
    });
  }
});

CSS

.quiz-lock {
  margin-top: -235px;
}

.quiz-lock-d-none {
  display: none;
}

For multiple elements, use the logic in a loop and store the clicked question in an array in localStorage and set show/hide classes.

Set:

window.localStorage.setItem('clickedQuestions', JSON.stringify([1, 3, 5))

Get(if item exists):

const clickedQuestions = JSOn.parse(localStorage.getItem('clickedQuestions')); //array

P.S: Used JSON.stringify and JSON.parse because setItem accepts only DomString as key and value

Upvotes: 1

Related Questions