Javascript 给出数组默认值并在按下按钮时替换它

Question

我正在尝试构建一个构建数组的测验。一开始测验是空的，但我希望它有一个默认值。

这是我的问题导航：

        /**
         *
         * @param {int} question
         * @returns {QuizPart}
         */
        SetQuestion(question) {

            if (this.questionNumber >= 0) {
                let oldAnswerButton = document.querySelectorAll('.filter_anwser');

                // Deletes old question when the next question is clicked
                for (let answerButton of oldAnswerButton) {
                    answerButton.style.display = 'none';
                }
            }

            this.questionNumber = question;

            let q = this.quiz[question];
            // Check if your at the last question so the next button will stop being displayed.
            if (this.questionNumber === Quiz.length - 1) {
                this.nextbtn.style.display = 'none';
                this.prevbtn.style.display = 'block';
                this.resultbtn.style.display = 'grid';
            } else if (this.questionNumber === 0) {
                this.nextbtn.style.display = 'block';
                this.prevbtn.style.display = 'none';
                this.resultbtn.style.display = 'none';
            } else {
                this.nextbtn.style.display = 'block';
                this.prevbtn.style.display = 'block';
                this.resultbtn.style.display = 'none';
            }

            // Displays Question
            this.questionName.textContent = q.questionText;
            this.questionName.id = "questionID";

            return q;
            console.log(this.getLink())
            console.log(this.tmp)

        }

        IntoArray() {
            const UrlVar = new URLSearchParams(this.getLink())
            this.UrlArray = [...UrlVar.entries()].map(([key, values]) => (
                    {[key]: values.split(",")}
                )
            );
        }

        NextQuestion() {
            // let quizUrl = this.url[this.questionNumber];
            let question = this.SetQuestion(this.questionNumber + 1);
            let pre = question.prefix;
            let prefixEqual = pre.replace('=', '');
            let UrlArr = this.UrlArray;
            let UrlKeys = UrlArr.flatMap(Object.keys)
            let answers = question.chosenAnswer.slice(0, -1);

            // Displays answers of the questions
            for (let y = 0; y < answers.length; y++) {
                let item = answers[y];

                // Display answer buttons
                if (UrlKeys.includes(prefixEqual)) {
                    console.log("exists");
                    let btn = document.querySelector('button[value="' + item.id + '"]');
                    btn.style.display = 'block';
                } else {
                    let btn = document.createElement('button');
                    btn.value = item.id;
                    btn.classList.add("filter_anwser", pre)
                    btn.id = 'answerbtn';
                    btn.textContent = item.name;
                    this.button.appendChild(btn);
                }
            }
            this.IntoArray();
        }

        PrevQuestion() {
            let question = this.SetQuestion(this.questionNumber - 1);
            let answers = question.chosenAnswer.slice(0, -1);

            // Displays answers of the questions
            for (let y = 0; y < answers.length; y++) {
                let item = answers[y];

                // Display answer buttons
                let btn = document.querySelector('button[value="' + item.id + '"]');
                btn.style.display = 'block';
            }
            this.IntoArray();
        }

Link 构建器和事件监听器：

        getLink() {
            this.tmp = [];
            for (let i = 0; i < this.url.length; i++) {
                // Check if question is from the same quiz part and adds a , between chosen answers and add the right prefix at the beginning
                if (this.url[i].length > 0) {
                    this.tmp.push("" + Quiz[i].prefix + this.url[i].join(","))
                    // console.log(this.url)
                }
                    if (this.url[i].length === 0) {
                        this.tmp.push("");
                }
            }
            /// If answers are from different quiz parts add a & between answers.
            return "" + this.tmp.join("&");
            // console.log(this.url[i].prefix);
        };

    control.button.addEventListener("click", function (e) {
        const tgt = e.target;

        // clear the url array if there's nothing clicked
        if (control.url.length === control.questionNumber) {
            control.url.push([]);
        }

        let quizUrl = control.url[control.questionNumber];

        // Check if a button is clicked. Changes color and adds value to the url array.
        if (quizUrl.indexOf(tgt.value) === -1) {
            if(quizUrl.includes("")){
                quizUrl.splice(quizUrl.indexOf(tgt.value), 1);
            }
            quizUrl.push(tgt.value);
            e.target.style.backgroundColor = "orange";
            // Check if a button is clicked again. If clicked again changes color back and deletes value in the url array.
        } else {
            quizUrl.splice(quizUrl.indexOf(tgt.value), 1);
            e.target.style.backgroundColor = "white";
        }

        console.log(control.getLink());
        console.log(quizUrl)

    })

当我按下一个按钮时，我将一个数组的值添加到一个名为 url 的数组中，它在构造函数中看起来像这样：

this.url = ["","",""];

它有三个字符串，因为有 3 个问题，所以每个问题都有一个默认值。 在事件监听器中，我放置了一个 if 语句来检查 url 中是否存在空字符串，如果是则拼接它，但由于某种原因我得到以下错误：

(index):329 Uncaught TypeError: quizUrl.splice is not a function at HTMLDivElement. ((index):329:25) (anonymous) @ (index):329

我需要一个默认值，这样我就不必回答所有问题，同时仍然能够在测验中进一步回答问题。有没有人知道解决这个问题的方法。

Answer 1

在您的 Quiz 中添加如下内容：

this.url = [];
for (let i = 0; i < quiz.length; i++){
    this.url.push([]);
}