我无法使用js创建动态元素计数器

debugcn 发表于 Dev

穆斯塔法·甘纳

我正在尝试做一个测验的项目。我有选择和答案的测验数组。我实际上尝试实现一个页面计数器按钮来创建一个数字，并根据该数字我想在我的UI中添加问题数组。但是我看不到超过1。

例如，当我单击任意选择按钮时，它会继续，而另一方面，使用分页计数器，我想使用分页计数器来处理测验问题数组quizQuestions[pageCounter]。

我的counter的第一个值是1。

我怎么了

const answersBlock = document.getElementById("answers");
const pageCounter = document.getElementById("count");

 let q1 = new Question("What is the best programming language?",["Python","Javascript","C#","Java"],"Javascript")
    let q2 = new Question("which one is the Server Side Programming Lanugage?",["Python","NodeJs","C#","C++"],"NodeJs")
    let q3 = new Question("Which one is the framework of JS",["Laravel","Django","Vue","C#"],"Vue");
    let q4 = new Question("Which one is not code editor?",["VsCode","NotePad++","SublimeText","Python"],"Python")
    
    //Storaging the questions
    let quizQuestions = [q2,q3,q4];
    
    document.addEventListener("DOMContentLoaded",()=>{

        //Loading the questions into Page

        UI.putQuestionsIntoUI(q1);

        //Playing around the buttons

        answersBlock.childNodes.forEach(element=>{

            if(element.nodeType === 1){
                element.addEventListener("click",()=>{

                    //console.log(element.textContent);

                    console.log("Clicked: "+ pageCounter.innerHTML +" times")

                    UI.nextQuestion(quizQuestions[pageCounter.innerText]);
                    
                    //Page Counter
                    //UI.increasePageCounter();
                    pageCounter.innerText++
                })
            }
        })
    })

UI.js

choicesToUI(answerObject){
        const answer = document.getElementById("answers");
     
        answer.innerHTML = `<button class="btn btn-primary">${answerObject.choices[0]}</button>
        <button class="btn btn-primary">${answerObject.choices[1]}</button>
        <button class="btn btn-primary">${answerObject.choices[2]}</button>
        <button class="btn btn-primary">${answerObject.choices[3]}</button>`
    }

这是js小提琴：https : //jsfiddle.net/jh2qmb1w/1/

巴津

我只是将答案按钮事件侦听器移动到choicesToUI函数。

static choicesToUI(answerObject){
        const answer = document.getElementById("answers");
     
        answer.innerHTML = `<button class="btn btn-primary">${answerObject.choices[0]}</button>
        <button class="btn btn-primary">${answerObject.choices[1]}</button>
        <button class="btn btn-primary">${answerObject.choices[2]}</button>
        <button class="btn btn-primary">${answerObject.choices[3]}</button>`
    
    
       answersBlock.childNodes.forEach(element=>{
        if(element.nodeType === 1){
            element.addEventListener("click",()=>{
                //console.log(element.textContent);
                console.log("Clicked: "+ pageCounter.innerHTML +" times")
                //Checking the answer
                Question.checkAnswer(element.textContent);

                UI.nextQuestion(quizQuestions[pageCounter.innerText]);
                
                //Page Counter
                //UI.increasePageCounter();
                pageCounter.innerText++
            })
        }
       })    
}

并在putQuestionsIntoUI函数中调用choicesToUI

static putQuestionsIntoUI(question) {
    //Gelen Paramtere Degeri Obje turundedir.
    console.log(question)

    const questionBlock = document.getElementById("question");
    const answersBlock = document.getElementById("answers");
    //Question
    questionBlock.innerHTML = `<p>${question.text}</p>`
    //Answers
    this.choicesToUI(question);
}

通过这些更改，您的代码可以完美运行：)检查此-> https://jsfiddle.net/kumnL9c4/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。