如何在仅使用JavaScript填充所有输入后启用提交

Question

我想禁用提交按钮，直到所有输入都只使用JavaScript填充，而不是使用HTML中的表单。目前，该按钮已禁用，但一旦所有输入都已满，则不允许用户提交。有人知道如何在输入满后启用提交按钮吗？

JavaScript

document.addEventListener('DOMContentLoaded', function(){
const required = document.querySelectorAll('.input');
//gets all the quiz_buttons                                                                                                                                      enableChecking();
const quizButton = document.querySelectorAll('.quiz_button');
for (const button of quizButton){
button.disabled = true;
for(let i = 0; i < required.length; i++){
required[i].addEventListener("input", () =>{
//what should I put here?
});
}
button.addEventListener('click', (event) => check_quiz(event.target.id));
}
});
function check_quiz(id){
console.log("button is clicked");
//get answers
let response1 = document.getElementById('id_question1').value.toUpperCase().replace(/s/g, "");
//repeats 9 times
//get divs
let div1 = document.getElementById('div1');
//repeats 9 times
var correctAnswers = 0;
//get quiz
fetch(`/check/${id}`)
.then(response => response.json())
.then(quiz => {
let rightM = "You got this correct. Great job!";
//checking if the answers are right
//#1
let answ1 = quiz.answer1.toUpperCase().replace(/s/g, "");
if(answ1 === response1){
div1.innerHTML = rightM;
div1.classList.add("correct"); 
correctAnswers++;
} else{
div1.innerHTML = `The correct answer is ${quiz.answer1}. Nice try!`;
div1.classList.add("incorrect");
}
//repeats 9 times
console.log(correctAnswers);
//display score
let score = document.getElementById("score");
score.innerHTML = `Your score is ${correctAnswers}. Great job! :)`;
score.classList.add("score_style");
//points
let newPoints = correctAnswers * 10;
let currentUser = parseInt(document.getElementById("user_id").value);
let currentPoints = parseInt(document.getElementById("user_points").value);
let numOfPoints = currentPoints + newPoints;
console.log(numOfPoints);
fetch(`/points/${currentUser}`,{
method: "PUT", 
body: JSON.stringify({
points: numOfPoints
})
})
})
}

我省略了代码中多余的部分。

Answer 1

最简单的方法是在输入时检查每个输入是否都有值，尝试下面的代码，这应该可以使用

document.addEventListener('DOMContentLoaded', function(){
const required = document.querySelectorAll('.input');
function checkSubmit(button) {
let isValid = true;
for(let i = 0; i < required.length; i++){
isValid = isValid && !!required[i].value;
}
button.disabled = isValid;
}
function inputHandler(button) {
return function () {
checkSubmit(button);
}
}
//gets all the quiz_buttons                                                                                                                                      

const quizButton = document.querySelectorAll('.quiz_button');
for (const button of quizButton){
button.disabled = true;
for(let i = 0; i < required.length; i++){
required[i].addEventListener("input", inputHandler(button));
}
button.addEventListener('click', (event) => 
check_quiz(event.target.id));
}
});