Values from Array Only Change Upon First Run of a Function-CodePudding

I'm a beginner working on a trivia app, and I'm having a heck of a time getting the questions to iterate properly. I've tried things multiple different ways. Here is my current configuration.

The questions are iterated by the pullQuestions() function. This function pulls from an array called question.

The pullQuestions() function is run when the startbutton is clicked and when the submitA button is clicked. These buttons run either startGame() or submitA() respectively.

Please note, I have not yet implemented score tracking so the expectation of the submit button is currently limited to pulling the next question.

Question HTML

        <div id="gameArea"  style="display: none;">
        
            <div >
            
                <h2 id="headerQ">Question Number</h2>
                <p id="content">Question Text</p>
            
            </div>
            
            <div >
                <!-- This can be ignored. This is where my options are but I'm not using them in my code yet -->
        
            </div>
            
            <button id="submitA"  onClick="submitA()">Submit</button>
                        
        </div>

startGame() JavaScript (This works as expected)

function startGame(){
    
    document.getElementById("startArea").style.display = "none";
    document.getElementById("gameArea").style.display = "block";

    question.id = 0;

    pullQuestions();

    console.log("startgame() Executed", question.id);
    console.log(question[0], question[1]);
}

Question Array* (Set as a Global Variable)

function select1() {
    
        if (op1.className == "selectionFalse") {
        document.getElementById("op1").className = "selectionTrue";
        document.getElementById("op2").className = "selectionFalse";
        document.getElementById("op3").className = "selectionFalse";
        document.getElementById("op4").className = "selectionFalse";
    
        console.log("selected1()", "If Condition", op1.className);
        }
    
        else {
        document.getElementById("op1").className = "selectionFalse";
        }   
    }

submitA() JavaScript (Does not iterate through the Array but does increase the id attribute)

function submitA() {
    question.id  ;
    console.log("submitA() Run)", "Question ID: ", question.id, headerQ, content);
}

*pullQuestions() JavaScript (This is run when the two above functions are run, but I only see results when it runs as part of the startGame() function.

function pullQuestions() {

if (question.id == 0) {
    document.getElementById("headerQ").innerHTML = question[0].headerQ;
    document.getElementById("content").innerHTML = question[0].content;

    console.log("pullQuestions() Executed");
    console.log("Variables: ", "headerQ = ", headerQ, "content = ", content); 
    }


if (question.id == 1) {
    document.getElementById("headerQ").innerHTML = question[1].headerQ;
    document.getElementById("content").innerHTML = question[1].content;

    console.log("pullQuestions() Executed");
    console.log("Variables: ", "headerQ = ", headerQ, "content = ", content);
    }

if (question.id == 2) {
    document.getElementById("headerQ").innerHTML = question[2].headerQ;
    document.getElementById("content").innerHTML = question[2].content;
    
    console.log("pullQuestions() Executed");
    console.log("Variables: ", "headerQ = ", headerQ, "content = ", content);
        }

}

I feel like I'm missing something small, but being that I'm new it's possible I'm approaching this all wrong. Any advice or direction is appreciated.

CodePudding user response：

It doesn't work for you in the submitA button because you forgot to activate the call to in it pullQuestions

On the other hand, in startGame you did activate pullQuestions after you changed the id, so it works for you

This is what the function should look like

function submitA() {
    question.id  ;
    pullQuestions();
    console.log("submitA() Run)", "Question ID: ", question.id, headerQ, content);
}