我是初學者，在 JS 中遇到一些可能很容易解決的問題。
我做了一個基于 NetNin??ja Udemy 課程的測驗，我希望在用戶點擊任何答案選項時啟用提交按鈕，而不是之前，這樣他/她就不能發送一個完全空的測驗。
測驗有 4 個問題，每個問題有 2 個選項，我發現這種方式......
const input_a = document.getElementById("q1a");
const input_b = document.getElementById("q1b");
button.disabled = true;
input_a.addEventListener('click', () => {
button.disabled = false;
});
input_b.addEventListener('click', () => {
button.disabled = false;
});
...當用戶單擊第一個問題的兩個選項中的任何一個時啟用按鈕（ID：q1a 和 q1b）按照這個邏輯，還有 q2a、q2b、q3a、q3b、q4a 和 q4b ..
由于有一種方法可以將所有答案包含在一個 JS 元素中，我應該在事件函式中說“當您單擊這 8 個選項中的任何一個時，啟用按鈕”？因為我嘗試的所有操作都只有在單擊所有按鈕時才能使該功能起作用，這在 Quiz 中顯然是不可能的。
謝謝！:)
uj5u.com熱心網友回復：
在下面的解決方案中，當單擊任何單選按鈕時，將激活提交按鈕。
let result = [false, false, false, false];
let submitButton = document.getElementById('submitButton');
/* Returns true if all tests have been completed. */
function isValid(){
for(let i = 0 ; i < result.length ; i)
if(result[i] != true)
return false;
return true;
}
/* If all tests are completed, the submit button is activated. */
function send(){
result[this.value] = true;
if(isValid()){
submitButton.disabled = false;
console.log("The form can be submitted!");
}
}
/* The send() method is called when the change event of <input> elements whose type is "radio" is fired. */
document.querySelectorAll('input[type="radio"]').forEach((element) => {
element.addEventListener("change", send);
});<form action="#">
<input type="radio" id="html" name="test1" value="0">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="test1" value="0">
<label for="css">CSS</label><br><br>
<input type="radio" id="js" name="test2" value="1">
<label for="html">JavaScript</label><br>
<input type="radio" id="c#" name="test2" value="1">
<label for="css">C#</label><br><br>
<input type="radio" id="c" name="test3" value="2">
<label for="html">C</label><br>
<input type="radio" id="c " name="test3" value="2">
<label for="css">C </label><br><br>
<input type="radio" id="python" name="test4" value="3">
<label for="html">Python</label><br>
<input type="radio" id="ruby" name="test4" value="3">
<label for="css">Ruby</label><br><br>
<button id="submitButton" type="submit" disabled>Submit</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/416970.html
標籤：