Kann mir jemand bei der Funktion in JavaScript helfen?

// init

let count = 0;

// counter element

const counter = document.getElementById("value");

// increment function

function incrementCounter() {

  count = Number(localStorage.getItem("count"));

  counter.innerText = count;

  localStorage.setItem("count", count + 1);

}

// event listener

window.onload = incrementCounter;

 let zurücksetzen = document.getElementById("resetbutton");

function aufnull (){

    zurücksetzen = localStorage.setItem("count", 0)

    count = Number(localStorage.getItem("count"));

    zurücksetzen.addEventListener("click", aufnull);

    incrementCounter();

   

};

zurücksetzen.addEventListener("click", aufnull);

ZUR FRAGE: Ich baue einen Besucherzähler und möchte, dass sich der Wer wieder auf 0 zurücksetzt, wenn man auf den Button Reset drückt. Leider setzt es sich erst zurück, wenn man reset drückt und die seite anschließend wieder aktualisiert.
Kann mir jemand helfen und es erklären?

Answer 1

[medmonk]

1. Verwende beim Programmieren keine Umlaute
2. Gewönne dir am besten sofort die englische Schreibweise an
3. Strukturiere deinen Programmcode (Variablen, Funktionen, Aufrufe...)
4. Vermeide es eher mit globalen Variablen zu arbeiten

HTML:

<div class="counter">
  <div class="count"></div>
  <button class="btn-reset">Reset count</button>
</div>

JavaScript:

const incrementCount = () => {
 const counter = document.querySelector('.count');
 
 if (localStorage.getItem('count') === null) {
  localStorage.setItem('count', 1);
  counter.innerHTML = localStorage.getItem('count');
 } else {
  localStorage.setItem('count', parseInt(localStorage.getItem('count')) + 1);
  counter.innerHTML = localStorage.getItem('count');
 }
}

const resetCount = () => {
 const btnReset = document.querySelector('.btn-reset');
 btnReset.addEventListener('click', () => {
  localStorage.removeItem('count');
   document.querySelector('.count').innerHTML = 0;
 })
}

(() => {
 incrementCount();
 resetCount();
})();

Du fragst vor jedem Aufruf ab, ob bereits ein Wert im localStorage gespeichert wurde. Wenn dem nicht so ist, wird der Wert auf 1 gesetzt. Falls doch wird der aktuelle Wert um 1 erhöht, gespeichert und erneut in .count geschrieben.

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer

Comments

[MarlonStrich]

Dankeschön, hat tatsächlich jetzt auch so geklappt.:-)
let zurücksetzen = document.getElementById("resetbutton");

 

function aufnull (){

    zurücksetzen = localStorage.setItem("count", 0)

    count = Number(localStorage.getItem("count"));

    incrementCounter();

   

};

zurücksetzen.addEventListener("click", aufnull);

Answer 2

[Babelfish]

Du musst in deiner aufnull-Funktion natürlich auch noch die Anzeige der Zahl aktualisieren:

counter.innerText = "0";

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Comments

[MarlonStrich]

Dankeschön! Hat tatsächlich jetzt auch s o geklappt, keine Ahnung wie aber es funktioniert.:-)
let zurücksetzen = document.getElementById("resetbutton");

 

function aufnull (){

    zurücksetzen = localStorage.setItem("count", 0)

    count = Number(localStorage.getItem("count"));

    incrementCounter();

   

};

zurücksetzen.addEventListener("click", aufnull);