Wieso springt die Funktion nicht auf die nächste Frage?

[Ossenkaemper]

const question = [
    {
        question: "What is 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is Alex fav Animal?",
        options: ["Dogs", "Cats", "Turtles", "iglos"],
        answer: "Dogs",
    },
    {
        question: "AAAAAAAAAAAAAAAA",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "BBBBBBBBBBBBBBBBBBBBB",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "CCCCCCCCCCCCCCCCCCCCCCCCCCCC",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "DDDDDDDDDDDDDDDDDD",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "Whasdasd0?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "WhaWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW+ 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "WhaZZZZZZZZZZZZZZZZZZZZZZZZZ+ 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "WYYYYYYYYYYYYYYYYYYYYYYYYYYY?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "WhaGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What iswdadaaaaaaaaaaaaaaaaaaaaaaaaa 10 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
    {
        question: "What is 101010110101 + 10?",
        options: ["8", "28", "20", "30"],
        answer: "20",
    },
];

let max = (question.length - 1);
let min = 0;
let question_number = Math.round(Math.random() * (max - min)) + min;
let correct = 0;


document.addEventListener("DOMContentLoaded", () => {
    load_question();
});


//ZUR NÄCHSTEN FRAGE WECHSELN FEHLT
//ZUFÄLLIGE FRAGE AUSWÄHLEN ABER NICHT WIEDERHOLEN
//NACH 30 FRAGEN AUFHÖREN UND SCORE ANZEIGEN

function load_question () {
    document.querySelector("#question").innerHTML = question[question_number].question;
    const options = document.querySelector("#options");
    options.innerHTML = "";
    for (const option of question[question_number].options) {
        options.innerHTML += `<button class="option">${option}</button>`;
    };
    document.querySelectorAll(".option").forEach( option => {
        option.onclick = () => {
            if (option.textContent == question[question_number].answer) {
                alert("RICHTIG");
                correct += 1;
                document.querySelector("#correct").innerHTML = `${correct} of ${question.length - 1}`;
                return next_question();
            } else {
                alert("FALSCH");
            }
        }
    })
};

function next_question () {
    load_question();
    console.log("nächste frage sollte kommen?")
};

console.log(question);
console.log(question_number);

Servus miteinander, ich verstehe nicht wieso wenn ich die "return next_question" aufrufe, das Programm nicht die nächste frage lädt...
danke für eure hilfe und erklärung

 

[basti1012]

Bitte nächstes Mal das HTML mit posten , das erleichtert in den meisten fälle die Fehlersuche.
Weil du das außerhalb der Funktion aufrufst

var question_number = Math.round(Math.random() * (max - min)) + min;

Einmal beim Start und das wahr es.
Du musst das beim jeden Durchlauf aufrufen.

Zb direkt am Anfang der Funktion

function load_question () {
var question_number = Math.round(Math.random() * (max - min)) + min;
usw.....

Man könnte da aber noch paar Sachen ändern .
Zb nach der 12 Frage ein Button einblenden für Neustart.
Die Antwort Buttons immer zufällig anordnen, damit man sich das nicht merkt.
Deine 3ter Button hat fast immer die richtig Antwort