Nie działa funkcja dla CLICK w JavaScript, gdzie mam błąd?

pytanie zadane 9 maja 2017 w JavaScript przez mylcharsky Nowicjusz (120 p.)

Cześć,

Uczę się JS, niestety mam problemem na lekcji ze zdarzeniami. Według mnie wszystko mam napisane odpowiednio, jednak rezulatat nie pojawia mi się w przeglądarce.

Rezultat: Pojawiający się alert po kliknięciu w przycisk oraz miana koloru przycisku na kolor czerowny (niebieski jest domyślny).


Mój edytor tekstu to Brackets, przeglądarka Chrome, IE, Edge (na żadnej nie działa).

Poniżej kod HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kurs javaScript</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <div class="container">
     <div class="row">
         <div class="col-md-12">
             <button id="przycisk" class="btn btn-primary">Kliknij tutaj</button>
         </div>
     </div>

  </div> 
<script src="js/scripts.js"></script>
</body>
</html>

Kod JavaScript:

var btn = document.querySelector('#btn');

btn.addEventListener('click', function() {
    alert('Nacisnalem przycisk!');
});

Gdzie tkwi problem?

Pozdrawiam

2 odpowiedzi

odpowiedź 9 maja 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)

var btn = document.querySelector('#przycisk');

Tak powinno być. Pomyliłeś klasę z Id. Napisałam swego czasu tekst o zdarzeniach: http://kot-zrodlowy.pl/javascript/programowanie/2017/04/26/zdarzenia-w-js-z-czym-to-si%C4%99-je.html

komentarz 9 maja 2017 przez mylcharsky Nowicjusz (120 p.)

Zmieniłem na '#przycisk' , niestety dalej się nic nie dzieje, a robię to na podstawie lekcji, jak podałem w odpowiedzi powyżej, niestety u mnie nie załapuje tego i nie wiem w czym tkwi problem.

Dziękuję za link do lektury, przeczytam koniecznie :)

Dodatkowo mam alerty w Bracketsie:

3	Expected exactly one space between 'function' and '('.	btn.addEventListener(function() {
4	Missing 'use strict' statement.	alert('Przycisk został naciśnięty!');
4	'alert' was used before it was defined.	alert('Przycisk został naciśnięty!');

komentarz 9 maja 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)

To nie są błędy. Tu masz działający kod: https://codepen.io/anon/pen/XRZbQG

komentarz 9 maja 2017 przez mylcharsky Nowicjusz (120 p.)

Dziękuję, teraz działa.
Tylko dlaczego w tamtej lekcji ni było podane to zdarzenie i wszystko był okej, natomiast u mnie musiało być ono dopisane?
Czy jest regułą dopisywanie preventDefault(); ?

komentarz 9 maja 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)

Już ci tłumaczę. Przycisk (button) ma atrybut type. Jeżeli nie jest ustawiony na wartość button, to standardowo jest submit. Standardowym zachowaniem tego typu jest przeładowanie strony. Dlatego właśnie nie widać, jak wyskakuje alert - bo nie zdąży się załadować. Można to rozwiązać na dwa sposoby:

zmienić standardowe zachowanie przycisku przez e.preventDefault()
albo ustawić type="button"

Link do dokumentacji button na MDN

odpowiedź 9 maja 2017 przez Michał Kazula Pasjonat (19,540 p.)

Wstaw kod w znaczniki kodu.
#btn to indeks a .btn to klasa.

komentarz 9 maja 2017 przez mylcharsky Nowicjusz (120 p.)

Zadam pewnie głupie pytanie, ale jak to w znaczniki kodu?

Lekcję robię na podstawie tej z YT : https://www.youtube.com/watch?v=PCt7b1-_IGs&list=PLGjoxB-1BV8IKoG_fb934nZXSVi_v-4yg&index=7

ok 7 minuty.

Jemu działa, mi niestey nie ;/