当测验答案正确或不正确时，将类添加到DIV元素

Question

我正试图将CSS类添加到JavaScript创建的元素中，但遇到trackerMarker元素的引用错误。tracker-markerDIV在加载时显示，但与事件侦听器一起使用时未定义。

我已经尝试在for loop的内部和外部使用createElement函数。

我不确定问题出在哪里。我正在边学习JS，所以非常感谢任何提示或建议。

function answerTracker() {
const answerTracker = document.querySelector(".tracker");
let questions = document.querySelectorAll(".container");
for (let i = 0; i < questions.length; i++) {
let trackerMarker = document.createElement("div");
trackerMarker.className = "tracker-marker";
answerTracker.appendChild(trackerMarker);
}
}
const runQuiz = (() => {
// Generate tracker
answerTracker();
let answers = document.querySelectorAll(".radio");
answers.forEach(function(answer) {
answer.addEventListener("click", (e) => {
let target = e.target;
let container = target.closest(".container");
let question = container.querySelector(".question");
let next = container.querySelector("button");
if (e.target.value == "t") {
trackerMarker.classList.add("correct");
} else {
trackerMarker.classList.add("incorrect");
}
if (next !== null && next !== "") {
next.style.display = "block";
}
question.style.display = "none";
});
});
})();

.tracker {
display: flex;
padding: 50px 0;
}
.tracker .tracker-marker {
width: 28px;
height: 28px;
margin: 0 1.25rem;
background-color: red;
border-radius: 100%;
}
.tracker .tracker-marker.correct {
background-color: blue;
}
.question {
margin-bottom: 18px;
}
.question .question__label {
margin-bottom: 8px;
}

<div class="tracker">
</div>
<fieldset class="container">
<div class="question">
<div class="question__label">
<span class="question-marker">1</span>
<label class="formControlLabel">Question One</label>
</div>
<input type="radio" name="form[question-one]" value="t" id="question-one0" class="radio">
<label for="question-one0">Answer A</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one1" class="radio">
<label for="question-one1">Answer B</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one2" class="radio">
<label for="question-one2">Answer C</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one3" class="radio">
<label for="question-one3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">2</span>
<label class="formControlLabel">Question Two</label>
</div>
<input type="radio" name="form[question-two]" value="t" id="question-two0" class="radio">
<label for="question-two0">Answer A</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two1" class="radio">
<label for="question-two1">Answer B</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two2" class="radio">
<label for="question-two2">Answer C</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two3" class="radio">
<label for="question-two3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">3</span>
<label class="formControlLabel">Question Three</label>
</div>
<input type="radio" name="form[question-three]" value="t" id="question-three0" class="radio">
<label for="question-three0">Answer A</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three1" class="radio">
<label for="question-three1">Answer B</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three2" class="radio">
<label for="question-three2">Answer C</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three3" class="radio">
<label for="question-three3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>

Answer 1

您从未在runQuiz中设置trackerMarker。

我使用了getElementsByClassName(因为您是如何编写代码的(，它将返回一个不理想的项数组。您应该向trackerMarkerdiv添加一个ID，然后使用getElementById。

function answerTracker() {
const answerTracker = document.querySelector(".tracker");
let questions = document.querySelectorAll(".container");
for (let i = 0; i < questions.length; i++) {
let trackerMarker = document.createElement("div");
trackerMarker.className = "tracker-marker";
answerTracker.appendChild(trackerMarker);
}
}
const runQuiz = (() => {
// Generate tracker
answerTracker();
let answers = document.querySelectorAll(".radio");
answers.forEach(function(answer) {
answer.addEventListener("click", (e) => {
let target = e.target;
let container = target.closest(".container");
let question = container.querySelector(".question");
let next = container.querySelector("button");
let trackerMarker = document.getElementsByClassName('tracker-marker')[0];
// ^-- I added this line only
if (e.target.value == "t") {
trackerMarker.classList.add("correct");
} else {
trackerMarker.classList.add("incorrect");
}
if (next !== null && next !== "") {
next.style.display = "block";
}
question.style.display = "none";
});
});
})();

.tracker {
display: flex;
padding: 50px 0;
}
.tracker .tracker-marker {
width: 28px;
height: 28px;
margin: 0 1.25rem;
background-color: red;
border-radius: 100%;
}
.tracker .tracker-marker.correct {
background-color: blue;
}
.question {
margin-bottom: 18px;
}
.question .question__label {
margin-bottom: 8px;
}

<div class="tracker">
</div>
<fieldset class="container">
<div class="question">
<div class="question__label">
<span class="question-marker">1</span>
<label class="formControlLabel">Question One</label>
</div>
<input type="radio" name="form[question-one]" value="t" id="question-one0" class="radio">
<label for="question-one0">Answer A</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one1" class="radio">
<label for="question-one1">Answer B</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one2" class="radio">
<label for="question-one2">Answer C</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one3" class="radio">
<label for="question-one3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">2</span>
<label class="formControlLabel">Question Two</label>
</div>
<input type="radio" name="form[question-two]" value="t" id="question-two0" class="radio">
<label for="question-two0">Answer A</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two1" class="radio">
<label for="question-two1">Answer B</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two2" class="radio">
<label for="question-two2">Answer C</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two3" class="radio">
<label for="question-two3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">3</span>
<label class="formControlLabel">Question Three</label>
</div>
<input type="radio" name="form[question-three]" value="t" id="question-three0" class="radio">
<label for="question-three0">Answer A</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three1" class="radio">
<label for="question-three1">Answer B</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three2" class="radio">
<label for="question-three2">Answer C</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three3" class="radio">
<label for="question-three3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>