我在这里尝试运行一个函数“renderQuestion”，它将随机化问题并在单击“下一步”按钮后显示下一个选项。通过“getSelectedValue”，我试图获取选定的单选按钮。
但我正在获取的是它显示我第一次按下“下一步”按钮时选择了哪个按钮，但它无法继续工作。它给出了一些错误“无法读取 null 的属性‘值’”。
如果我不使用“renderForm.reset()”，我每次点击下一步都能得到值。现在，我在这里做错了什么？
const renderForm = document.querySelector("#renderForm");
const next = document.querySelector("#next");
// const q = document.querySelector("#question");
// const ans1 = document.querySelector("#ans1");
// const ans2 = document.querySelector("#ans2");
// const ans3 = document.querySelector("#ans3");
// const ans4 = document.querySelector("#ans4");
renderQuestion = async () => {
const timeout = async (ms) => new Promise((res) => setTimeout(res, ms));
let userClicked = false;
let arr = [ans1, ans2, ans3, ans4]; //array of options
for (let i = arr.length - 1; i > 0; i--) { ////randomizing array
const j = Math.floor(Math.random() * (i + 1));
const temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
// q.innerHTML =
// `${totalQ}/${ongoing}` + ` ` + qID.data().question;
// arr[0].innerHTML = qID.data().a;
// arr[1].innerHTML = qID.data().b;
// arr[2].innerHTML = qID.data().c;
// arr[3].innerHTML = qID.data().d;
next.addEventListener("click", (e) => {
console.log("inside next");
let getSelectedValue = document.querySelector('input[name="ans"]:checked');
console.log(getSelectedValue.value);
getSelectedValue.checked = false;
userClicked = true;
e.preventDefault();
// renderForm.reset();
});
while (userClicked === false) await timeout(50);
};
start = async () =>
{
for(let i=0;i<4;i++)
{
await renderQuestion();
}
}
start();#renderForm p {
display: inline;
}
.option {
/* display: inline-block; */
font-size: 1.5rem;
margin-block: 2rem;
margin-left: 1rem;
}
.button {
border: none;
outline: none;
font-size: 1rem;
margin-top: 1rem;
background-color: #081b0a;
color: #ffffff;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 100;
font-family: monospace;
margin-bottom:8rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<title>Document</title>
</head>
<body>
<section>
<form action="" id="renderForm">
<p id="question"></p>
<div class="option">
<input type="radio" name="ans" id="option1" value="ans1" required />
<p id="ans1">1</p>
</div>
<div class="option">
<input type="radio" name="ans" id="option2" value="ans2" required />
<p id="ans2">2</p>
</div>
<div class="option">
<input type="radio" name="ans" id="option3" value="ans3" required />
<p id="ans3">3</p>
</div>
<div class="option">
<input type="radio" name="ans" id="option4" value="ans4" required />
<p id="ans4">4</p>
</div>
<button class="button" id="next" type="submit">Next</button>
</form>
</section>
<script src="/js.js"></script>
</body>
</html>最佳答案
将 eventlistener 移出循环。您只需要应用一次，如果您委托(delegate)它(意思是将监听器应用到静态父对象，例如document，然后测试目标ID)，它将适用于您添加到 DOM 的任何 #next 按钮。
document.addEventListener("click", (e) => {
if (e.target.id !== 'next') return
console.log("inside next");
let getSelectedValue = document.querySelector('input[name="ans"]:checked');
console.log(getSelectedValue.value);
getSelectedValue.checked = false;
userClicked = true;
e.preventDefault();
// renderForm.reset();
});
const renderForm = document.querySelector("#renderForm");
const next = document.querySelector("#next");
document.addEventListener("click", (e) => {
if (e.target.id !== 'next') return
console.log("inside next");
let getSelectedValue = document.querySelector('input[name="ans"]:checked');
console.log(getSelectedValue.value);
getSelectedValue.checked = false;
userClicked = true;
e.preventDefault();
// renderForm.reset();
});
renderQuestion = async() => {
const timeout = async(ms) => new Promise((res) => setTimeout(res, ms));
let userClicked = false;
let arr = [ans1, ans2, ans3, ans4]; //array of options
for (let i = arr.length - 1; i > 0; i--) { ////randomizing array
const j = Math.floor(Math.random() * (i + 1));
const temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
while (userClicked === false) await timeout(50);
};
start = async() => {
for (let i = 0; i < 4; i++) {
await renderQuestion();
}
}
start();#renderForm p {
display: inline;
}
.option {
/* display: inline-block; */
font-size: 1.5rem;
margin-block: 2rem;
margin-left: 1rem;
}
.button {
border: none;
outline: none;
font-size: 1rem;
margin-top: 1rem;
background-color: #081b0a;
color: #ffffff;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 100;
font-family: monospace;
margin-bottom: 8rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<title>Document</title>
</head>
<body>
<section>
<form action="" id="renderForm">
<p id="question"></p>
<div class="option">
<input type="radio" name="ans" id="option1" value="ans1" required />
<p id="ans1">1</p>
</div>
<div class="option">
<input type="radio" name="ans" id="option2" value="ans2" required />
<p id="ans2">2</p>
</div>
<div class="option">
<input type="radio" name="ans" id="option3" value="ans3" required />
<p id="ans3">3</p>
</div>
<div class="option">
<input type="radio" name="ans" id="option4" value="ans4" required />
<p id="ans4">4</p>
</div>
<button class="button" id="next" type="submit">Next</button>
</form>
</section>
<script src="/js.js"></script>
</body>
</html>关于javascript - 重置 radio 表格的正确方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68108325/