我正在嘗試構建一個構建陣列的測驗。一開始測驗是空的,但我希望它有一個默認值。
這是我的問題導航:
/**
*
* @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();
}
鏈接構建器和事件監聽器:
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 不是 HTMLDivElement 的函式。((索引):329:25)(匿名)@(索引):329
我需要一個默認值,這樣我就不必回答所有問題,同時仍然能夠在測驗中進一步回答問題。有誰知道解決這個問題的方法。
uj5u.com熱心網友回復:
在您Quiz添加類似的內容:
this.url = [];
for (let i = 0; i < quiz.length; i ){
this.url.push([]);
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/413802.html
標籤:
