Ich habe hier ein Codebeispiel der ein Element in den LocalStorage lädt. Das funktioniert auch soweit. Was nicht funktioniert ist das Wechseln der Farbe des Links je nach Klick, der dann zwischen den CSS-Klassen show und hide wechseln soll aber nur für einen Bruchteil der Sekunde wechseln. Was mache ich hier nicht richtig? Ist es die Codeposition?
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
a.show{
background-color:red;
color:red;
font-size: 40px;
}
a.hide{
background-color:yellow;
color:yellow;
font-size: 20px;
}
</style>
</head>
<body>
<a href="#" id="calendar" onClick="new Test(this,1,{});">Click</a>
<script>
class Test{
constructor(oElement,iKey,aJson){
this.ToggleSave(oElement,iKey,aJson);
}
ToggleSave(oElement,iKey,aJson){
if(localStorage.getItem(iKey) === null){
//alert("Add");
localStorage.setItem(iKey, aJson);
oElement.classList.remove('hide');
oElement.classList.add('show');
}else{
// alert("Remove");
localStorage.removeItem(iKey);
oElement.classList.remove('show');
oElement.classList.add('hide');
}
}
}
</script>
</body>
</html>
Zuletzt bearbeitet:
