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

Drukowanie słowa

VPS Starter Arubacloud
+1 głos
302 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 (251,210 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 (190,190 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 (190,190 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 (190,190 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ź 260 wizyt
pytanie zadane 5 stycznia 2020 w JavaScript przez milogab2004 Początkujący (440 p.)
0 głosów
0 odpowiedzi 829 wizyt
pytanie zadane 21 maja 2016 w JavaScript przez niezalogowany
0 głosów
1 odpowiedź 664 wizyt
pytanie zadane 1 grudnia 2019 w Offtop przez reaktywny Nałogowiec (40,650 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...