Drukowanie słowa

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

odpowiedź 3 grudnia 2020 przez VBService Ekspert (252,660 p.)
edycja 3 grudnia 2020 przez VBService

Najlepsza

Kod nie działa bo:

Wywołujesz funkcję writes() z onload w <body>, której nie masz,
div nie "posiada" zdarzenia onload <div ... onload="reader()">,
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

<!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.)

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 :)

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).