A dajmy na to, że chciałbym przerobić skrypt z 3 odcinka kursu JavaScript pana Mirka:
W tutorialu wygląda to tak:
var haslo="Bez pracy nie ma kołaczy";
haslo=haslo.toUpperCase();
function wypisz_haslo() {
document.getElementById("plansza").innerHTML=haslo;
}
window.onload = wypisz_haslo;
Została utworzona zmienna haslo, przypisano do niej funkcję toUpperCase(); oraz został zamieniony jej wewnętrzny HTML. Wszystko śmiga, w konsoli po sprawdzeniu istnienia zmiennej haslo, zmienna wraca napis.
Natomiast ja postanowiłem zamiast metody onclick wykonać funkcję samowywołującą, którą poznałem z innego tutorialu oraz zamiast getElementById uzyc querySelector. Efekt? Nie działa.
Poniżej przedstawię kod źródłowy:
(function wypiszHaslo() {
var haslo="Bez pracy nie ma kołaczyy";
haslo.haslo.toUpperCase();
haslo=document.querySelector("#plansza");
})();
Tak jak wspomniałem, utworzyłem zmienną samowywołującą się, która działa, ale zmienna, którą utworzyłem nie istnieje, kiedy sprawdzam w konsoli, zwraca ona błąd: "Uncaught ReferenceError: haslo is not defined(…)"
Dodatkowo, konsola nie traktuje funkcji toUpperCase jako funkcji, czego dowodem jest błąd przez nią zwracany: "Uncaught TypeError: Cannot read property 'toUpperCase' of undefined".
Jak mogę naprawić to tak, aby działało tak samo jak za pomocą getElementById i dlaczego nie działa to w sposób, jaki przedstawiłem ? Probowalem modyfikować kod, zadeklarować zmienne przed funkcją, ale to nic nie dało.