Funkcja shift() na tablicach i nie zrozumiałe jej działanie

0

Siemka,
Proszę o pomoc bo już siedzę przy tym chyba z 10h :( (przy jednym problemie).
pisze sobie "Write test" ,który ma sprawdzić po napisanu w input czy słowo zgadza się jeżeli tak to usuwa to słowo i następne słowo przejmuje po nim numer w tablicy[0] , jeżeli się nie zgadza to usuwa to słowo i jest kolejne. Problem polega na tym ,że po napisaniu pierwszego słowo i zaakceptowaniu go spacją zerową tablice normalnie się consoluje i usuwa ,ale już pozostałe już nie ,jest tak : biegać , 9x źle (z poprawnym napisaniem)
Proszę o wskazówki jak lepiej publikować takie wątki ,ponieważ jest to mój pierwszy wątek i może jakiś code review :)
HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Write test</title>
</head>
<body>
    <main>
        <div class="textToWrite"></div>
        <div><input type="text" class="writeText"></div>
    </main>
    <script src="index.js"></script>
</body>
</html>

JS:

let words = ['biegać' ,'klasa ' ,'latanie ', 'nie ' ,'tak ' ,'za ' ,'w ' ,'obok ', 'o ' ,'dość '];
const writeText = document.querySelector('.writeText');
const textToWrite = document.querySelector('.textToWrite')
const word = '';

const writeWords = () =>{
    for(let i=0; i<10;i++){
        const span = document.createElement('span');
        textToWrite.appendChild(span);
        span.classList = `words word${i}`
        span.textContent += words[i];; 
    }
}

const checkWord = (e) =>{
    if(e.keyCode === 32){
        
            if(writeText.value === words[0]){
                console.log(words[0]);
                //words.shift();
            }

            else{
                console.log('źle');
                words.shift();
                //words.shift(08fiszek11Udar0xEEqq19w0811);
            }
            writeText.value = '';
        }
}


writeText.addEventListener('keydown',checkWord);
window.addEventListener('load',writeWords);
3 
let words = ['biegać' ,'klasa' ,'latanie', 'nie' ,'tak' ,'za' ,'w' ,'obok', 'o' ,'dość'];
const writeText = document.querySelector('.writeText');
const textToWrite = document.querySelector('.textToWrite')
const word = '';

const writeWords = () =>{
    for(let i=0; i<10;i++){
        const span = document.createElement('span');
        textToWrite.appendChild(span);
        span.classList = `words word${i}`
        span.textContent += words[i] + ' '; 
    }
}

const checkWord = (e) =>{
    if(e.keyCode === 32){
e.preventDefault();
console.log('value: ', writeText.value);
console.log('words[0]: ', words[0]);

            if(writeText.value === words[0]){
                console.log(words[0]);
                words.shift();
            }

            else{
                console.log('źle');
                words.shift();
            }
            writeText.value = '';
            
            console.log('words: ', words);
        }
}

writeText.addEventListener('keydown',checkWord);
window.addEventListener('load',writeWords);

Moje zmiany:

  1. spacje między wyrazami dodałem jako treść elementu span zamiast tego co jest w tablicy words
  2. Po naciśnięciu spacji dodałem e.preventDefault();. zakomentuj sobie to i zobacz co ci się wypisze w konsoli. jak wciskałeś spację to ten klawisz jeszcze nie był widoczny wewnątrz writeText.value, ale później spacja się dodawała i kolejne wpisy zaczynały się od spacji na początku. Wykorzystaj moje console.logi, zakomentuj e.preventDefault(); i zobacz rezultaty

Mam nadzieje, że pomogłem.

Pozdrówki

0

dziękuje <3 , już wytrzymać nie mogłem <3

1 użytkowników online, w tym zalogowanych: 0, gości: 1