![](/img/trans.png)
[英]How to pass a specific variable to go back to the previous page when the browser back button is pressed (In Javascript)?
[英]Javascript CreateElement in loop go back to previous looped value when button is pressed?
我正在做一個類似測驗的項目。 您會收到多個問題和答案,您可以單擊任何答案來創建個人結果。 我已經問過一個關於這個項目的問題,因為我真的不知道如何正確循環並且我解決了這個問題,但它仍然不是很好。 現在我正在創建一個以前的按鈕,它有點工作,但不是很好。
我的代碼:
<div class="container">
<div id="question"></div>
<div id="answer"></div>
<button onclick="NextQuestion()" id="nextbtn">Next</button>
<button onclick="PrevQuestion()" id="prevbtn">Previous</button>
<div id="finalLink"></div>
</div>
JS
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 = 0;
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() {
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 (Quiz.length - 1 === questionNumber) {
nextbtn.style.display = 'none';
resultbtn.style.display = 'grid';
}
// Displays Question
questionName.textContent = question.questionDescription;
questionName.id = "questionID";
// adds 1 to question to see a different question
questionNumber++;
}
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.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 (Quiz.length === questionNumber) {
prevbtn.style.display = 'none';
resultbtn.style.display = 'grid';
}
// Displays Question
questionName.textContent = question.questionDescription;
questionName.id = "questionID";
}
現在你可以看到當我按下上一個按鈕時我創建了一個新元素(也可以在下一張圖片中看到):
我試圖不創建一整套新的元素,而是回到前一組。 我嘗試使用一個簡單的 if 語句來做到這一點,例如:
let i = 0;
if (i < question.chosenAnswer[y]){
y--;
}
這只是我嘗試過但沒有奏效的東西。 任何人都可以幫我這樣做嗎?
保存信息:
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));
})
您需要使用 element.remove() 而不是 element.style.display ="none"
為什么? element.remove() - 將完全刪除 DOM 元素。 element.style.display ="none" - 只會為最終用戶隱藏它。 但它仍然會在 DOM 樹上。
Js Fiddle 的解決方案如下:
還修復了您代碼中的一些問題。 在我修復的地方添加了注釋行
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 = 0; let button = document.getElementById('answer'); let questionName = document.getElementById('question'); let nextbtn = document.getElementById('nextbtn'); let prevbtn = document.getElementById('prevbtn') let resultbtn = document.getElementById('finalLink'); function NextQuestion() { let oldAnswerButton = document.querySelectorAll('.filter_anwser'); // Deletes old question when the next question is clicked for (let answerButton of oldAnswerButton) { **//CORRECTION DONE HERE** answerButton.remove(); } 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); } //FIX ADDED HERE FOR NEXT BUTTON AND PREVIOUS BUTTON CHANGES // Check if your at the last question so the next button will stop being displayed. if (questionNumber > 0 ) { prevbtn.style.display = 'grid' } if (Quiz.length - 1 <= questionNumber) { nextbtn.style.display = 'none'; resultbtn.style.display = 'grid'; }else{ nextbtn.style.display = 'grid'; } // Displays Question questionName.textContent = question.questionDescription; questionName.id = "questionID"; // adds 1 to question to see a different question questionNumber++; } function PrevQuestion(){ questionNumber--; let oldAnswerButton = document.querySelectorAll('.filter_anwser'); // Deletes old question when the next question is clicked for (let answerButton of oldAnswerButton) { **//CORRECTION DONE HERE** answerButton.remove(); } 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); } //FIX ADDED HERE FOR NEXT BUTTON AND PREVIOUS BUTTON CHANGES //Check if your at the last question so the prev button will stop being displayed. if (questionNumber < Quiz.length - 1) { nextbtn.style.display = 'grid'; } if (questionNumber <= 0) { prevbtn.style.display = 'none'; }else{ prevbtn.style.display = 'grid'; } // Displays Question questionName.textContent = question.questionDescription; questionName.id = "questionID"; }
<div class="container"> <div id="question"></div> <div id="answer"></div> <button onclick="NextQuestion()" id="nextbtn">Next</button> <button onclick="PrevQuestion()" id="prevbtn">Previous</button> <div id="finalLink"></div> </div>
您必須檢索以前創建的按鈕來顯示(*)它們。
例如,您可以使用它們的id
檢索它們,該 id 放在它們的value
屬性中:
for (let y = 0; y < question.chosenAnswer.length; y++) {
let item = question.chosenAnswer[y];
// retrieve the button by it's value="id" attribute
let btn = document.querySelector('button[value="' + item.id + '"]');
btn.style.display = 'grid';
}
(*) 請注意,當您說“刪除問題”時,您實際上只是在隱藏它們,而不是刪除(即從文檔中刪除)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.