僅使用 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));
    }
});