How to enable a submit once all the inputs are filled using only JavaScript?

Question

I want to disable a submit button until all the inputs are filled using only JavaScript and am not using a form in HTML. Currently, the button is disabled but will not allow the user to submit once all the inputs are full. Does anyone know how to enable the submit button once the inputs are full?

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
            })
        })
    })
}

I omitted redundant parts of my code.

Answer 1

the simplest way is to check if every input has value when you type into input, try following code, this should work

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));
    }
});