Javascript 未捕获类型错误DOM元素controlLabels[i]未定义
以下代码显示此错误:未捕获的TypeError:controlLabels[i]在用于表单的感谢页面上未定义。表单及其所有元素在此页面上不存在。引用此函数的函数不会在“谢谢”页面上产生任何错误。我已将该函数包括在下面 更新:使查询选择器更具体,并将controlLabels长度分配给count变量,从而解决了问题。Javascript 未捕获类型错误DOM元素controlLabels[i]未定义,javascript,dom,Javascript,Dom,以下代码显示此错误:未捕获的TypeError:controlLabels[i]在用于表单的感谢页面上未定义。表单及其所有元素在此页面上不存在。引用此函数的函数不会在“谢谢”页面上产生任何错误。我已将该函数包括在下面 更新:使查询选择器更具体,并将controlLabels长度分配给count变量,从而解决了问题。 function questionMarkers() { const controlLabels = document.querySelectorAll('div[cla
function questionMarkers() {
const controlLabels = document.querySelectorAll('div[class*="rsform-block-question"] .formControlLabel');
let count = controlLabels.length;
for (let i = 0; i < count; i++) {
let marker = `<span class="question-marker">${i+1}</span>`;
controlLabels[i].insertAdjacentHTML('beforebegin', marker);
}
}
function runQuiz() {
questionMarkers();
let correctAnswers = 0;
let totalQuestions = 8;
const answers = document.querySelectorAll(".rsform-radio");
answers.forEach(function (answer) {
answer.addEventListener("click", function (event) {
let target = event.target;
let formContainer = target.closest(".formContainer");
let trueElement = formContainer.querySelector("div[class$='true']");
let falseElement = formContainer.querySelector("div[class$='false']");
let feedbackElement = formContainer.querySelector("div[class$='feedback']");
let questionBlock = formContainer.querySelector('div[class*="rsform-block-question"]');
let nextButtons = formContainer.querySelector(".js-btn--next.success");
let submitButton = formContainer.querySelector(".js-btn--submit.rsform-submit-button");
if (event.target.value == "t") {
trueElement.style.display = "block";
falseElement.style.display = "none";
feedbackElement.style.display = "block";
correctAnswers++;
console.log(correctAnswers);
if(nextButtons !== null && nextButtons !== '') {
nextButtons.style.display = "block";
}
if(submitButton !== null && submitButton !== '') {
submitButton.style.display = "block";
}
} else {
trueElement.style.display = "none";
falseElement.style.display = "block";
feedbackElement.style.display = "block";
if(nextButtons !== null && nextButtons !== '') {
nextButtons.style.display = "block";
}
if(submitButton !== null && submitButton !== '') {
submitButton.style.display = "block";
}
}
questionBlock.style.display = "none";
});
});
}
runQuiz();
包含insertAdjacentHTML的HTML表单块供参考:
<div class="row rsform-block rsform-block-question-one">
<div class="medium-3 columns">
<span class="question-marker">1</span>
<label class="formControlLabel" data-tooltip="" aria-haspopup="true" data-disable-hover="false" tabindex="1" title="">
What sense do owls use the most?
</label>
</div>
<div class="medium-9 columns formControls">
<input type="radio" name="form[question-one]" value="f" id="question-one0" class="rsform-radio">
<label for="question-one0">Sight</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one1" class="rsform-radio">
<label for="question-one1">Smell</label>
<br>
<input type="radio" name="form[question-one]" value="t" id="question-one2" class="rsform-radio">
<label for="question-one2">Hearing</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one3" class="rsform-radio">
<label for="question-one3">Taste</label>
</div>
</div>
1.
猫头鹰最常用什么感觉?
景象
气味
听力
品味
我不确定为什么
问号函数有问题。如果元素少于8个
元素,就会出现该错误。为什么不使用let count=controlLabels.length代码>?
<div class="row rsform-block rsform-block-question-one">
<div class="medium-3 columns">
<span class="question-marker">1</span>
<label class="formControlLabel" data-tooltip="" aria-haspopup="true" data-disable-hover="false" tabindex="1" title="">
What sense do owls use the most?
</label>
</div>
<div class="medium-9 columns formControls">
<input type="radio" name="form[question-one]" value="f" id="question-one0" class="rsform-radio">
<label for="question-one0">Sight</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one1" class="rsform-radio">
<label for="question-one1">Smell</label>
<br>
<input type="radio" name="form[question-one]" value="t" id="question-one2" class="rsform-radio">
<label for="question-one2">Hearing</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one3" class="rsform-radio">
<label for="question-one3">Taste</label>
</div>
</div>