我正在用 javascript 做一個個人測驗，看看你想要什么衣服。大多數作業正常，除了我在按下答案時給出的值不正確。
網址：
<div className="container">
<div id="question"></div>
<div id="answer"></div>
<button onClick="NextQuestion()" id="nextbtn">Next</button>
<button onClick="PrevQuestion()" id="prevbtn" style="display: none;">Previous</button>
<div id="finalLink"></div>
</div>
JS：
document.getElementById("finalLink").innerHTML =
"<a id='FLink' href='https://www.voetbalshop.nl/voetbalschoenen.html#' onClick='location.href=this.href getLink(url);return false;'>Result</a>";
class QuizPart {
constructor(questionDescription, chosenAnswer, prefix) {
this.questionDescription = questionDescription;
this.chosenAnswer = chosenAnswer;
this.prefix = prefix;
}
}
class ChosenAnswer {
constructor(id, name) {
this.id = id;
this.name = name;
}
}
let Quiz = [
new QuizPart('Whats your size?', [
new ChosenAnswer('6595', '41'),
new ChosenAnswer('6598', '42'),
new ChosenAnswer('6601', '43'),
], 'bd_shoe_size_ids='),
new QuizPart('What color would you like?', [
new ChosenAnswer('6053', 'Red'),
new ChosenAnswer('6044', 'Blue'),
new ChosenAnswer('6056', 'Yellow'),
new ChosenAnswer('6048', 'Green'),
], 'color_ids='),
new QuizPart('What brand would you like?', [
new ChosenAnswer('5805', 'Adidas'),
new ChosenAnswer('5866', 'Nike'),
new ChosenAnswer('5875', 'Puma'),
], 'manufacturer_ids='),
]
// console.log(Quiz);
let url = [];
let questionNumber = -1;
let button = document.getElementById('answer');
let questionName = document.getElementById('question');
let nextbtn = document.getElementById('nextbtn');
let prevbtn = document.getElementById('prevbtn')
let resultbtn = document.getElementById('FLink');
function NextQuestion() {
// adds 1 to question to see a different question
questionNumber ;
let oldAnswerButton = document.querySelectorAll('.filter_anwser');
// Deletes old question when the next question is clicked
for (let answerButton of oldAnswerButton) {
answerButton.style.display = 'none';
}
let question = Quiz[questionNumber];
// Displays answers of the questions
for (let y = 0; y < question.chosenAnswer.length; y ) {
let item = question.chosenAnswer[y];
// Display answer buttons
let btn = document.createElement('button');
btn.value = item.id;
btn.className = "filter_anwser";
btn.textContent = item.name;
button.appendChild(btn);
}
// Check if your at the last question so the next button will stop being displayed.
if (questionNumber > 0) {
prevbtn.style.display = 'block';
} else {
prevbtn.style.display = 'none';
}
if (Quiz.length - 1 <= questionNumber) {
nextbtn.style.display = 'none';
resultbtn.style.display = 'grid';
} else {
nextbtn.style.display = 'block';
resultbtn.style.display = 'none';
}
// Displays Question
questionName.textContent = question.questionDescription;
questionName.id = "questionID";
}
function PrevQuestion() {
questionNumber--;
let oldAnswerButton = document.querySelectorAll('.filter_anwser');
// Deletes old question when the next question is clicked
for (let answerButton of oldAnswerButton) {
answerButton.style.display = 'none';
}
let question = Quiz[questionNumber];
// Displays answers of the questions
for (let y = 0; y < question.chosenAnswer.length; y ) {
let item = question.chosenAnswer[y];
// Display answer buttons
let btn = document.querySelector('button[value="' item.id '"]');
btn.style.display = 'block';
}
//Check if your at the last question so the next button will stop being displayed.
if (questionNumber < Quiz.length - 1) {
nextbtn.style.display = 'block';
}
if (questionNumber <= 0) {
prevbtn.style.display = 'none';
} else {
prevbtn.style.display = 'block';
}
if (Quiz.length - 1 <= questionNumber) {
resultbtn.style.display = 'grid';
} else {
resultbtn.style.display = 'none';
}
// Displays Question
questionName.textContent = question.questionDescription;
questionName.id = "questionID";
}
/**
* Returns the paremeters for the URL.
*
* @param {Array} url The parameters .... .
*/
function getLink(url) {
let tmp = [];
for (let i = 0; i < 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 (url[i].length > 0) {
tmp.push("" Quiz[i].prefix url[i].join(","))
}
}
/// If answers are from different quiz parts add a & between answers.
console.log(url, questionNumber);
return "" tmp.join("&");
};
button.addEventListener("click", function (e) {
const tgt = e.target;
// clear the url array if there's nothing clicked
if (url.length < questionNumber) {
url.push([]);
}
let quizUrl = url[questionNumber - 1];
// Check if a button is clicked. Changes color and adds value to the url array.
if (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(getLink(url));
})
當我打開我的網站時，它會顯示開頭，當我開始測驗時，我會看到我的第一個問題以及下面的所有答案，但是當我單擊第一個問題的答案時，出現錯誤，而第二個問題則顯示正確的值，但在第一個問題的前綴等中。它基本上總是將值設定為上一個問題。
也讓它更清楚一點，您給出的所有答案都收集在一個變數（url）中。最后它看起來像這樣：
bd_shoe_size_ids=6732,4765&color_ids=3846,4635&manufacturer_ids=4563,3456
變數中的文本是問題，而 id 是您單擊的答案。當我點擊屬于制造商 ID 的答案時，它會將答案設定為 color_ids abd，當點擊一個答案時，它會為鞋子尺碼著色。
有人可以幫我解決這個問題嗎？
第一個問題給出的錯誤如下：
（索引）：188 未捕獲的型別錯誤：無法讀取 HTMLDivElement 中未定義的屬性（讀取“indexOf”）。((索引):188)
uj5u.com熱心網友回復：
要清除陣列，請將其設定為 [] 或呼叫 splice。
不正確
if (url.length < questionNumber) {
url.push([]);
}
正確的
url = []
// or
url.splice(0, url.length)
然后是這個
let quizUrl = url[questionNumber - 1];
如果清除它而不回傳，則會引發錯誤。
在此行之前放置一條日志陳述句。
console.log(url)
let quizUrl = url[questionNumber - 1];
因為這條線可能是罪魁禍首。
quizUrl.indexOf(quizUrl)
事實上，url除了推送一個空陣列之外，我什至看不到您在陣列中添加任何內容的位置。
uj5u.com熱心網友回復：
我很驚訝沒有人發現明顯的問題。你有：
let questionNumber = -1;
//...
function NextQuestion() {
questionNumber ;
//...
}
function PreviousQuestion() {
questionNumber--;
//...
}
所以你的 questionNumber 是 0 索引的（第一個問題是 0，第二個問題是 1，等等）
你獲取電流的方式quizUrl是錯誤的：
let quizUrl = url[questionNumber - 1];
對于第一個問題 ( questionNumber=0) 你得到的url[-1]是未定義的，因此你的錯誤。
你應該使用：
let quizUrl = url[questionNumber];
您可以使用除錯器輕松除錯此類錯誤。（例如，如果您使用 Chrome，請參閱https://developer.chrome.com/docs/devtools/javascript/）
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399633.html
標籤：javascript 变量