javascript - 我怎样才能增加一个数组并让它从第一个索引开始？

Question

我正在做一个测验，一切都很好。但是你们能帮我设置下一个问题吗？这是代码：

 <header>
            <h2>My Quiz Game</h2>
        </header>
        <h1 id="h1-element">Welcome!</h1>
        <input type="text" id="text" placeholder="Enter Name">
        <button id="Submit">Submit Name</button>
        <div id="start-btn">
            
        </div>
        <div id="p-div">
    
        </div>
        <div id="container">
    
        </div>
        <div class="container-2" id="Tabel-of-Answers">
        <div id="my-Answer-Btns" class="My-Answers">
            <div id="my-question-div" class="Question-div"></div>
            <div class="my-Btns" id="Btns">
    
        </div>
    
        </div>
    </div>
        <h3 id="text1"><p>Make a choice!</p></h3>
        <button class="Next">Next</button>
       <script>
          //My Html Elements in javascript
    let myQuestionDiv = document.getElementById('my-question-div')
    const btnNextDiv = document.querySelector(".Next-btn")
    // Seting up my questions
    
    const easyQuestions = [
        {
            Question:"Who created Facebook?",
            Options:[
                {option:"Mark Zuckerberg", value:10},
                {option:"Jeff Bezos", value:20}
            ]
        },
        {
            Question:"What's the oldest programming language?",
            Options:[
                {option:"Fortran", value:30},
                {option:"C++", value:40},
            ]
        },
        {
            Question:"What's the most popular programming language in 2021",
            Options: [
                {option:"Javascript", value:50},
                {option:"Python", value:60}
            ]
        }
    ]
     
    
    
    
    
    // Setup
    
    const myBtns = document.querySelectorAll('.Btn')
    const myOtherBtns = document.getElementById("Btns")
    const para = document.getElementById("para")
    const AllOfMyAnswers = document.getElementById('Tabel-of-Answers')
    const allEl = document.getElementsByTagName("*")
    const ChoiceEl = document.getElementById("text1")
    const next = document.querySelector(".Next")
    //Logic
    
    AllOfMyAnswers.classList.add("hide");
    ChoiceEl.classList.add("hide");
    document.body.classList.add("blue-color")
    document.getElementById("Submit").addEventListener('click', hidenEl, { once: true })
    next.classList.add("hide")
    let questionIndex = 0;
    //Starting our game.
    const sortedItems = easyQuestions.sort(() => Math.random() - 0.5);
    function hidenEl() {
       const str = document.getElementById("text").value
       const Name = str;
       const StartBtn = document.createElement("button");
       StartBtn.innerText = "Start";
       document.getElementById("start-btn").appendChild(StartBtn)
       StartBtn.classList.add("Start")
       StartBtn.addEventListener('click', (e) => {
        if(e.target) {
            const paraEl = document.createElement("p");
            paraEl.innerText = "Pick a level!"
            paraEl.style.fontSize = "18px"
            const myFirstLevel = document.createElement("button")
            const mySecondLevel = document.createElement("button");
            const myThirdLevel = document.createElement("button")
            myFirstLevel.innerText = "Easy"
            mySecondLevel.innerText = "Medium";
            myThirdLevel.innerText = "Hard";
            myFirstLevel.classList.add("Button")
            mySecondLevel.classList.add("Button")
            myThirdLevel.classList.add("Button")
            StartBtn.classList.add("hide")
            document.getElementById("h1-element").remove();
            const container = document.getElementById("container");
            container.classList.add("container");
            const myDiv = document.getElementById("p-div");
            myDiv.appendChild(paraEl)
            myFirstLevel.addEventListener("click", (e) => {
                if(e.target) {
                    myFunctionForOptions(sortedItems[questionIndex] , myFirstLevel, mySecondLevel, myThirdLevel, container, paraEl)
                }
            })
            container.append(myFirstLevel, mySecondLevel, myThirdLevel)
            myFirstLevel.style.margin = '20% 10%'
            mySecondLevel.style.margin = '20% 10%'
            myThirdLevel.style.margin = '20% 10%'
       document.getElementById("text").classList.add("hide");
       document.getElementById("Submit").remove()
        }
       }, { once: true })
    }
    //Definening which answer is correct or wrong!
    
    function myFunctionForOptions(shuffledItems, firstLevel, secondLevel, thirdLevel, myContainer, paragraph) {
    let score = 0;

从这里开始一切都很好。它实际上是从数组的第一个索引开始的。但我不能去下一个问题。

const p = document.createElement("p");
        myQuestionDiv.appendChild(p)
        const [firstObj, secondObj] = shuffledItems.Options
    shuffledItems.Options.forEach(item => {
        p.innerText = shuffledItems.Question;
        const button = document.createElement("button");
        button.addEventListener("click", (e) => {
            if(e.target) {
                if(item.value === 10 ) {
                    document.body.classList.add("green")
                    score += 40
                } else if(item.value === 30) {
                document.body.classList.add("green")
                score += 40
                } else if(item.value === 50) {
                    score+= 40
                    document.body.classList.add("green")
                } else {
                    score -= 20
                    console.log(false)
                    document.body.classList.add("red")
                }
            }
           myNextQuestion(shuffledItems)
        }, {once:true})
        button.innerText = item.option;
        button.classList.add("Btn");
        myOtherBtns.appendChild(button)
        document.body.classList.remove("blue-color");
        paragraph.classList.add("hide")
        myContainer.classList.add("hide")
        setTimeout(() => {
            document.body.classList.add("img");
            document.getElementById("Tabel-of-Answers").classList.remove("hide")
            ChoiceEl.classList.remove("hide")
        }, 1000)
    })
}

我试图做这样的事情，例如使用运算符“++”增加 shuffledQuestions。但它总是打印出 null ...

function myNextQuestion(Elements) {
    Elements++
}

enter code here
enter code here

标签： javascriptbuttonincrementinnertext