Pewnie prosty błąd...

pytanie zadane 27 stycznia 2021 w JavaScript przez Nabuchadonozor Gaduła (3,120 p.)
zamknięte 28 stycznia 2021 przez Nabuchadonozor

Witam serdecznie,

napotkałem się z pewnym problemem, otóż zacząłem praktykować książkę "JavaScript i jQuery" Daivd'a Sawyer'a McFarland. Z jQuery jeszcze nie miało na moim aktualnym rozdziale miejsca, aczkolwiek w pewnym rozdziale zadano napisanie quizu. Nie mogę rozwiązać pewnego kłopotu.

Otóż to jest plik index.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="style.css">
    <script src="script.js"></script>  

    <title>Document</title>
</head>

<body onload="ask()">
    <header>
        QUIZ
    </header>

    <main>
        <div id="questions">
            PYTANIE
        </div>
        <div class="answers">
            <button class="btnSubmit" id="ansA" onclick="nextQuestion(); validation()">ODPOWIEDŹ</button>
        </div>
        </div>
        <div class="answers">
            <button class="btnSubmit" id="ansB" onclick="nextQuestion(); validation()">ODPOWIEDŹ</button>
        </div>

    </main>

    <script>
        document.getElementById('ansA').innerHTML = 'xD';
    </script>
   
</body>
</html>

A to script.js:

var end = false;

const questions = [
        'Co oznacza typ INT?',
        'Jak deklarujemy HTML5?',
        'Który typ oznacza łancuchy znaków?'
]


var answersA = [
        'Liczby całkowite',
        '<html5>...</html5>',
        'string'
    ]

var answersB = [
        'Liczby zmiennoprzecinkowe',
        '<!DOCTYPE html>',
        'char'
    ]

var variableNextQuestion = false;

function nextQuestion(){
    variableNextQuestion = true;
}

function ask(){

    while(end!=true){
        for(var i=0; i<3; i++){
            document.getElementById('questions').innerHTML = questions[i];
            document.getElementById('ansA').innerHTML = answersA[i];
            document.getElementById('ansB').innerHTML = answersB[i];

            while(!nextQuestion()){
                variableNextQuestion = false;
            }
        }
    }
}

function validation();

Miałby ktoś może pomysł, dlaczego funkcja ask() nie działa? InnerHTML nie podmienia słowa "ODPOWIEDŹ" na to co powinno...

komentarz zamknięcia: Rozwiązałem, poniżej dałem odpowiedź ;)

1	komentarz 27 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.) function validation(); Jeśli to faktyczny kod, to powinien rzucać SyntaxError'em. Przy okazji, spójrz w konsolę przeglądarki (klawisz F12), tam pojawią się ewentualne błędy, które powinny pomóc w namierzeniu przyczyny problemu.

2 odpowiedzi

odpowiedź 27 stycznia 2021 przez rafal.budzis Szeryf (85,260 p.)

Przeglądarki działają trochę inaczej niż program w C++ ;) Tutaj masz jeden główny wątek i dopóki JS nie skończy swojej pracy przeglądarka nie odświeży obrazu. te pętle while są do wywalenia ;)

Spróbuj tak

var currentQuestion = 0;


function ask(){

     document.getElementById('questions').innerHTML = questions[currentQuestion];
     document.getElementById('ansA').innerHTML = answersA[currentQuestion];
     document.getElementById('ansB').innerHTML = answersB[currentQuestion];

     currentQuestion+=1;
}

Gdy wywołasz drugi raz funkcje ask to podmienia ci się pytanie na następne

komentarz 27 stycznia 2021 przez Nabuchadonozor Gaduła (3,120 p.)

Jeśli chodzi o to (podmiana tylko w pliku script.js):

var end = false;

const questions = [
        'Co oznacza typ INT?',
        'Jak deklarujemy HTML5?',
        'Który typ oznacza łancuchy znaków?'
]


var answersA = [
        'Liczby całkowite',
        '<html5>...</html5>',
        'string'
    ]

var answersB = [
        'Liczby zmiennoprzecinkowe',
        '<!DOCTYPE html>',
        'char'
    ]

var variableNextQuestion = false;

function nextQuestion(){
    variableNextQuestion = true;
}

var currentQuestion = 0;
 
 
function ask(){
 
     document.getElementById('questions').innerHTML = questions[currentQuestion];
     document.getElementById('ansA').innerHTML = answersA[currentQuestion];
     document.getElementById('ansB').innerHTML = answersB[currentQuestion];
 
     currentQuestion+=1;
}


function validation();

to nic nie zmieniło, cały czas na stronie pisze "odpowiedź zamiast bieżącego pytania :|

Dzięki za odpowiedź ;)