Im using a javascript function to change color on some icons with dataset. i cant find out how i can make the color that i change with a click, to stay that way.
this is the javascript function:
window.onload = oppdater;
function oppdater() {
const clickHandler = function () {
this.style.color =
this.style.color != this.dataset.activeColor ?
this.dataset.activeColor :
this.dataset.disabledColor;
};
for (const element of document.querySelectorAll(".active-color-aware")) {
element.onclick = clickHandler;
}
}<div>
<img src="img/mug_test.png" height="200px" width="200px">
<p>fillifjonka grå</p>
<div id="icon_colors" class="center_icon_text">
<i data-active-color="green" data-disabled-color="#6080a0" class="fas fa-home fa-3x active-color-aware"></i>
<i data-active-color="yellow" data-disabled-color="#6080a0" class="fas fa-grin-hearts fa-3x active-color-aware"></i>
<i data-active-color="red" data-disabled-color="#6080a0" class="fas fa-heart-broken fa-3x active-color-aware"></i>
</div>
</div>If you want to save the info event after user closes the browser, you can leverage the localstorage
// Save
localStorage.setItem("activeColor", "red");
// Get
var activeColor = localStorage.getItem("activeColor");