Zdarzenia w javascript

Question

Witam, napisałem następujący kod do obsługi zdarzenia w javascript:

let upBtn = document.getElementById("up1");
let countPos = document.querySelector(".counter");
let count = 0;

upBtn.addEventListener('click', function() {
  count++;
  console.log(count);
  countPos.innerHTML = count;
});

Jeśli do zmiennej upBtn przypisuje div o id "up1" wszystko działa tak jak należy licznik jest zwiększany za każdym kliknięciem i jego wartość jest wyświetlana w konsoli oraz w elemencie o klasie "counter". Mój problem polega na tym że nie chodzi tutaj o kliknięcia w diva a w button, jednak gdy w zmiennej upBtn mamy odwołania do buttona a nie do diva kod przestaje działać. Jak przyjrzałem się temu co dzieje się w przeglądarce gdy klikam na button to odnoszę wrażenie że po kliknięciu licznik na ułamek sekundy zwiększa swoją wartość gdyż 1 pojawia się i w konsoli i w tym elemencie jednak po chwili znika z konsoli a wartość licznika w elemencie "counter" na powrót jest zerem są to ułamki sekund więc jest to tylko miganie. Z góry dziękuję za pomoc i pozdrawiam :)

Answer 1

Sprawdziłam i działa. Przykład masz tutaj. Prawdopodobnie zamiast button, użyłeś: <input type="submit">, który powoduje przeładowanie całej strony i w rezultacie brak zapisania wyników.

Answer 2

Dzięki za odpowiedź, jednak ona tylko bardziej namieszała mi w głowie :) faktycznie twój kod działa jednak ja w swoim również zastosowałem button mimo to nie działa. Może lepiej to będzie zobrazowane jak umieszczę tutaj cały projekt:

https://github.com/rezmik/Patronage2017zad2

 

Comments

Dodaj do każdego buttona atrybut type="button". Wtedy wszystko będzie działać. Button ma standardowo type submit, co powoduje przeładowanie formularza. Tutaj masz reference.