<p id = "question"> </p>
     <input id ="yourAnswer" type = "text" placeholder="Write your answer">
     <button id = "checkAnswer" onclick = "check()"> Submit</button>

Это мой HTML-код внутри тега body

var quiz = [
            ["Who lived at 221B, Baker Street, London? ", "Sherlock Holmes"],
            ["When did the First World War start? ", "1914"],
            ["Who wrote Julius Caesar, Macbeth and Hamlet? ", "Shakespeare"],
            ["Who invented the telephone?", "Bell"],
            ["Where is the smallest bone in the body?", "ear"]
           ];


var score = 0;
var wrongAnswer = 0;

playQuiz(quiz);

function playQuiz(quiz) {

    for (var i = 0, question, answer, max = quiz.length; i < max; i++) {
        document.getElementById("question").innerHTML = quiz[i][0]; 
        question = quiz[i][0];
        console.log(question);     
        answer = document.getElementById("yourAnswer").value;
        var expectedAnswer = quiz[i][1];
        ask(question);
        check(answer, expectedAnswer);

    }

    gameOver();

}

Мой цикл for не работает, чтобы изменить вопрос, как только я нажму кнопку отправки. Вопросы отображаются в журнале консоли, но не меняют вопрос в моем document.getElementById («вопрос»). InnerHTML.

function ask(question) {
    return document.getElementById("question").innerHTML = question;
}

Программа идет прямо здесь, как только я запустил программу

function check(answer, expectedAnswer) {

    if (answer === expectedAnswer) { // quiz[i][1] is the ith answer   
        alert("Correct!"); // increase score by 1  
        score++;
    } else {
        alert("Wrong!");
        wrongAnswer++;
    }
}

 function gameOver(){   
    alert(`Game Over, you scored ${score} points and ${wrongAnswer} wrong answers`);  
} 


```
0
Kristine2018

1 ответ

Как я понимаю, вы хотите показывать каждый вопрос один за другим и ждать ответа пользователя, прежде чем отобразить следующий вопрос. Если так, то я думаю, что вам на самом деле не нужно использовать цикл; Вы можете просто отобразить следующий вопрос, когда пользователь ответит на текущий. Итак, вам нужны две основные функции: одна для отображения вопроса, а другая для проверки ответа, когда пользователь нажимает кнопку.

Вот пример функции, которая будет отображать вопрос:

var currentQuestionIndex = 0;
var expectedAnswer = '';

displayQuestion();

function displayQuestion() {
    // display current question and save the correct answer
    var question = quiz[currentQuestionIndex][0];
    expectedAnswer = quiz[currentQuestionIndex][1];

    document.getElementById('question').innerText = question;
}

Вот ваша функция check () , немного измененная:

function checkAnswer() {
    var answer = document.getElementById('answer').value;

    if (answer == expectedAnswer) {
        alert('Correct!');
        score++;
    } else {
        alert('Wrong!');
        wrongAnswers++;
    }

    // after you check the answer, display the next question
    currentQuestionIndex++;
    displayQuestion();
}

И тогда вам просто нужно добавить проверку на наличие следующего вопроса, и если вопросов больше нет, то вызовите функцию gameOver () . Вот целый рабочий пример: JSFiddle

P. S .: Ваш код переходит к функции check () , потому что вы напрямую вызываете его в цикле for в своей функции playQuiz () .

58578815