（Javascript）检查是否所有输入字段都已填写并随后激活按钮

Question

我有一组动态生成的输入字段。 我想遍历所有这些并检查用户是否确实在它们上面写了一些东西。
如果所有字段都已填写，请激活按钮，否则将其停用。
代码真的很长，所以这里是最重要的部分：

        //Here is the loop that creates the number of inputs to create based on what the user enters:
        (CourseObject.course_array).forEach((evaluation,value) => {
        const percentage_value = CourseObject.each_evaluation_value[value]; 

        //Some lists
        const li_inputs = document.createElement('li');
        li_inputs.id = ((`${evaluation}-of-${CourseName}-input-li`.replace(/°/g, "")).replace(/ /g, "")).toLocaleLowerCase();
        li_inputs.className = "list-group-item";
        (document.getElementById(`${CourseName}-input-ul`).appendChild(li_inputs));

        //Here starts the important stuff, creation of the inputs and attributes
        const text_input = document.createElement('input');
        text_input.type = 'text';
        text_input.placeholder = `Nota de ${evaluation} (${percentage_value}%)`;
        text_input.id = ((`${evaluation}-of-${CourseName}-input-text`.replace(/°/g, "")).replace(/ /g, "")).toLocaleLowerCase();
        text_input.className = 'form-control grade-input';
        (document.getElementById(((`${evaluation}-of-${CourseName}-input-li`.replace(/°/g, "")).replace(/ /g, "")).toLocaleLowerCase())).appendChild(text_input);

    }
    );

    //Creating the button
    const SendAndShow = document.createElement('button');
    SendAndShow.textContent = 'Calcular';
    SendAndShow.id = 'send-and-show-button';
    SendAndShow.disabled = true; //Desactivated from the beggining
    SendAndShow.className = 'btn btn-dark';
    document.getElementById('second-column').appendChild(SendAndShow);

    //Here I want to loop through the inputs. If they are all filled, SendAndShow.disabled = false
        
    //A random event set to be activated once the button is clicked
    document.getElementById('send-and-show-button').onclick = function() {
    .
    . //Something to do
    .
    }

我已经尝试过 querySelectorAll 并通过 class 获取元素，但我似乎无法破解它，有什么建议吗？ 注意：我想要一个纯 JS 答案，没有 JQuery。

Answer 1

您可以在每个输入元素中使用 onchange 方法，然后使用 FormData 检查输入的值

 const form = document.querySelector('#form') function getFormData() { formData = new FormData(form) console.log(formData.entries()) } text_input.onchange = function(){ getFormData() }

 <form id='form'></form>

Answer 2

对于动态元素，将侦听器添加到parent或body ，然后检查您的输入元素

 createInput.addEventListener('click', function() { let input = document.createElement('input') myform.prepend(input) submit.setAttribute('disabled', '') }) // the parent myform.addEventListener('input', function(el) { if (el.target.tagName;= 'INPUT') return. // chack all input let allFilled = true document.querySelectorAll('#myform input').forEach(function(input) { if (;input.value) allFilled = false. }) // set the button state if (allFilled) submit,removeAttribute('disabled') else submit.setAttribute('disabled', '') })

 input{display:block;margin:10px;}

 <button id="createInput">Create input</button><br><br> <form id="myform"> <button id="submit" disabled>Submit</button> </form>