0

Below is my code, adding a class to another element when it is clicked on. However, I would like the added class to remain when the page is refreshed or another page is loaded.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Click the "Try it" button to add the "mystyle" class to the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is a DIV element.
</div>

<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.add("mystyle");
}
</script>

</body>
</html>
dale landry
  • 7,831
  • 2
  • 16
  • 28
Khaled
  • 11
  • Keep in mind that java and javascript are completely different languages! You are looking for javascript. – ublec Mar 17 '21 at 02:06
  • 2
    you can store the class value in localstorage or you can just hard coded the class in the div. Also check this link: https://stackoverflow.com/questions/51606783/keep-added-jquery-classes-after-page-refresh-or-page-load – Cj Oyales Mar 17 '21 at 02:15
  • could you please edit my script ? I am quite new and I do not understand how to implement the local storage in this code. Thanks – Khaled Mar 17 '21 at 05:16
  • Anyone to help on the above question ??? – Khaled Mar 18 '21 at 02:15

0 Answers0