如何仅用JavaScript实现所有输入框填满前禁用提交按钮

你的代码里有几个关键问题导致提交按钮逻辑失效：

1. 输入框选择器不匹配 #

Django模板里输入框的class是input，但你JS里用的是.inputs（多了个s），导致找不到输入框元素，自然无法判断是否填写完成。

2. 按钮选择器错误 + DOM元素操作问题 #

document.getElementsByClassName(".quiz_button")这里多了个.，而且getElementsByClassName返回的是HTMLCollection集合，不能直接给disabled赋值，得取集合里的第一个元素（或者用querySelector直接获取单个按钮更简单）。

3. 绑定事件的函数未执行 #

你定义了bindText函数，但在DOMContentLoaded里没调用它，导致输入框的input事件根本没绑定，永远不会触发检查逻辑。

4. 初始状态未禁用按钮 #

页面加载时输入框都是空的，按钮应该默认禁用，否则用户一开始就能点击提交。

修正后的完整JavaScript代码 #

// 绑定输入框的输入事件
function bindText() {
    // 修正选择器：用.input而不是.inputs
    const required = [...document.querySelectorAll(".input")];
    required.forEach(input => input.addEventListener('input', checkText));
    // 页面加载时先执行一次检查，确保按钮初始是禁用的
    checkText();
}

function checkText() {
    const required = [...document.querySelectorAll(".input")];
    // 用querySelector直接获取按钮，更简洁
    const button = document.querySelector(".quiz_button");
    // 判断所有输入框是否都有内容，反向设置disabled状态
    button.disabled = !required.every(input => input.value.trim().length > 0);
}

document.addEventListener('DOMContentLoaded', function(){
    // 调用绑定事件的函数
    bindText();

    const quizButton = document.querySelectorAll('.quiz_button');
    for (const button of quizButton){
        button.addEventListener('click', (event) => check_quiz(event.target.id));
    }
})

function check_quiz(id){
    console.log("button is clicked");

    // 这里可以优化成循环获取答案，避免重复写10次，但先保留你的逻辑
    let response1 = document.getElementById('id_question1').value.toUpperCase().replace(/\s/g, "");
    let response2 = document.getElementById('id_question2').value.toUpperCase().replace(/\s/g, "");
    // ... 剩下8个response的获取

    let div1 = document.getElementById('div1');
    let div2 = document.getElementById('div2');
    // ... 剩下8个div的获取

    var correctAnswers = 0;

    fetch(`/check/${id}`)
    .then(response => response.json())
    .then(quiz => {
        const rightM = "You got this correct. Great job!";
        // 注意这里你第二个判断写错了：quiz.answer1应该是quiz.answer2
        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");
        }

        // 修正这里的quiz.answer1为quiz.answer2
        let answ2 = quiz.answer2.toUpperCase().replace(/\s/g, "");
        if(answ2 === response2){
            div2.innerHTML = rightM;
            div2.classList.add("correct");
            correctAnswers++;
        } else{
            div2.innerHTML = `The correct answer is ${quiz.answer2}. Nice try!`;
            div2.classList.add("incorrect");
        }
        // ... 剩下8个判断逻辑

        console.log(correctAnswers)
        let score = document.getElementById("score");
        score.innerHTML = `Your score is ${correctAnswers}. Great job! :)`;
        score.classList.add("score_style");

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

另外，顺便提一下你check_quiz里的小错误：第二个答案判断时用了quiz.answer1，应该是quiz.answer2，已经在代码里修正了。

内容的提问来源于stack exchange，提问作者user19590524