• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Drukowanie słowa

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
+1 głos
183 wizyt
pytanie zadane 2 grudnia 2020 w JavaScript przez Dariusz Hozer Użytkownik (920 p.)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="writes()">
    <div class="container" onload="reader()"></div>
 <style>

</body>
</html>

function reader(){
const liczba=0;
const con=document.querySelector('.container');

const napis = "drukowanie";

con.innerHTML+= napis.charAt(liczba);
liczba++;
}

setInterval(reader,1000);

Witam. Nie ma efektu drukowania. Co sekundę chciałem, żeby wartość zmiennej liczba wzrastała o 1 (wiem że to inkrementacja liczba++) co sekundę. Jeżeli sekunda mija, wzrasta wartość o jeden i jest dwa, czyli trzecia litera słowa...itd Gdzie robię źle, Proszę o poradę....

2 odpowiedzi

+1 głos
odpowiedź 3 grudnia 2020 przez VBService Ekspert (233,350 p.)
edycja 3 grudnia 2020 przez VBService
 
Najlepsza

Kod nie działa bo:

  1. Wywołujesz funkcję writes() z onload w <body>, której nie masz,
  2. div nie "posiada" zdarzenia onload <div ... onload="reader()">,
  3. Z każdym wywołaniem funkcji reader() zmienna liczba jest zerowana,

[ edit ]

od "pojawienia" się HTML5, nie wiem jak było wcześniej, niech Mnie ewentualnie ktoś "poprawi", nie stosujemy zdarzeń wewnątrz kodu html (chodź Mi o to, że nie jest to dobra praktyka), tylko "używamy" w js-ie np.: addEventListener-a. 

Zapis

con=document.querySelector('.container')

dobrze jest "wyciągnąć" poza funkcję, nie ma potrzeby z każdym wywołaniem funkcji reader() (co 1 sekundę w tym przypadku) pobierać referencję do elementu <div class="container" ... >

Moja propozycja zmian w kodzie przy pomocy arrow function  Codepen wink

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>    
  </style>
</head>  
<body>
  <div class="container"></div> 
</body>
</html>
window.onload = () => {
  const board = document.querySelector('.container');  
  const msg = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut tellus lorem. Curabitur pellentesque nunc sed ultrices tempus. Vivamus ullamcorper lectus leo, sed iaculis leo interdum sit amet. Sed nec posuere enim. Nam feugiat nisi dolor, non feugiat sapien varius quis. Quisque imperdiet est sed sem vulputate, vitae ultrices nibh tempus. Fusce sed malesuada velit.';
  const msg_length = msg.length - 1;
  let char_index = 0;
  
  const id_interval = setInterval(() => {
    //if (char_index > msg_length) char_index = 0;
    if (char_index > msg_length) clearInterval(id_interval);
    
    board.textContent += msg.charAt(char_index++);
  }, 150)
}

 

komentarz 3 grudnia 2020 przez ScriptyChris Mędrzec (191,640 p.)

 

  1. div nie "posiada" zdarzenia onload <div ... onload="reader()">,

onload to nie jest zdarzenie, tylko handler w formie atrybutu HTML zmapowany z property obiektu DOM obsługujący zdarzenie load.

od "pojawienia" się HTML5, nie wiem jak było wcześniej, niech Mnie ewentualnie ktoś "poprawi", nie stosujemy zdarzeń wewnątrz kodu html, tylko "używamy" w js-ie np.: addEventListener-a. 

Obsługa eventów z poziomu atrybutów HTML i handlerów w DOM była dostępna od początku, w DOM Level 0, który zdaje się że nie był jeszcze ustandaryzowaną wersją DOM'u. Interfejs EventListener'a został dodany później, jako standaryzacja obsługi eventów w DOM Level 2.

Czy możesz podać źródło, dlaczego akurat od HTML5 nie powinno się obsługiwać zdarzeń wewnątrz kodu HTML? Specka to nadal definiuje (i raczej musi, żeby zachować wsteczną kompatybilność), ale fakt, że nie jest to dobra praktyka.

Moja propozycja zmian w kodzie przy pomocy IIEF

W którym miejscu jest IIFE?

komentarz 3 grudnia 2020 przez Dariusz Hozer Użytkownik (920 p.)
Dziękuję za porady. Jestem bardzo wzruszony. Pomogło. Ale o dziwo  zmienne dałem na globalne (poza funkcję) i zadziałało  :)
0 głosów
odpowiedź 2 grudnia 2020 przez ScriptyChris Mędrzec (191,640 p.)

Przy każdym wywołaniu funkcji reader tworzysz zmienną liczba, pod koniec jej używasz do odnalezienia znaku w zmiennej napis, potem inkrementujesz, a na końcu ona "znika", ponieważ funkcja kończy swoje działanie.

Przenieś zmienną liczba poza funkcje i zmień jej słówko deklaracyjne na let, ponieważ operacja inkrementacji nie może być wykonana na zmiennej utworzonej słówkiem const (w konsoli przeglądarki powinien być błąd).

komentarz 2 grudnia 2020 przez Dariusz Hozer Użytkownik (920 p.)
Przed wejściem, by zajrzeć na forum, coś mi świtało właśnie o const dzięki  :)
komentarz 2 grudnia 2020 przez Dariusz Hozer Użytkownik (920 p.)
Wszystko było dobrze, tylko zmienne dałem poza funkcję, na globalne...
komentarz 2 grudnia 2020 przez ScriptyChris Mędrzec (191,640 p.)

To coś jeszcze nie działa, czy już jest ok? "Globalność" zmiennych i funkcji można zlikwidować owijając całość w IIFE lub moduł.

Podobne pytania

0 głosów
1 odpowiedź 209 wizyt
pytanie zadane 5 stycznia 2020 w JavaScript przez milogab2004 Początkujący (440 p.)
0 głosów
0 odpowiedzi 770 wizyt
pytanie zadane 21 maja 2016 w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 508 wizyt
pytanie zadane 1 grudnia 2019 w Offtop przez reaktywny Nałogowiec (35,090 p.)

91,290 zapytań

139,959 odpowiedzi

315,201 komentarzy

60,740 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...