Javascript 禁用按钮，直到 3 个或更多输入字段具有值

Question

我的 html 页面中有 6 个输入字段，如下所示：

<div class='inputBox'>
        <form action="/" method="post">
            <div>
                <label>Angle of A = </label>
                <input class='field' autocomplete="off" autofocus name="A" type="number">
            </div>
            <div>
                <label>Angle of B = </label>
                <input class='field' autocomplete="off" autofocus name="B" type="text">
            </div>
            <div>
                <label>Angle of C = </label>
                <input class='field' autocomplete="off" autofocus name="C" type="text">
            </div>
            <div>
                <label>Side Length of a = </label>
                <input class='field' autocomplete="off" autofocus name="a" type="text">
            </div>
            <div>
                <label>Side Length of b = </label>
                <input class='field' autocomplete="off" autofocus name="b" type="text">
            </div>
            <div>
                <label>Side Length of c = </label>
                <input class='field' autocomplete="off" autofocus name="c" type="text">
            </div>

            <div>
                <button id='calculate' disabled="true" class='field' type="submit">Calculate</button>
            </div>
        </form>
</div>

我希望按钮被禁用，直到 6 个字段中的任何 3 个具有值。 这是我的 javascript 代码：

        function enableButton()
        {
            var filled = 0;
            var fields = [...document.getElementsByClassName("field")];
            for (var i = 0; i < 6; i++)
            {
                if (fields[i].length() > 0)
                {
                    filled += 1;
                }
            }
            if (filled >= 3)
            {
                document.getElementById("calculate").disabled = false;
            }
            else
            {
                document.getElementById("calculate").disabled = true;
            }
        }

不幸的是，尽管具有值的字段数量很多，但按钮仍处于禁用状态。

Answer 1

尝试对输入字段使用更改事件，我使用onkeyup函数来调用enableButton函数。 而不是检查fields[i].length()尝试检查fields[i].value是否存在。 这是一个工作示例。

 function enableButton() { var filled = 0; var fields = [...document.getElementsByClassName("field")]; for (var i = 0; i < 6; i++) { if (fields[i].value) { filled += 1; } } if (filled >= 3) { document.getElementById("calculate").disabled = false; } else { document.getElementById("calculate").disabled = true; } }

 <div class='inputBox'> <form action="/" method="post"> <div> <label>Angle of A = </label> <input class='field' autocomplete="off" autofocus name="A" type="number" onkeyup="enableButton()"> </div> <div> <label>Angle of B = </label> <input class='field' autocomplete="off" autofocus name="B" type="text" onkeyup="enableButton()"> </div> <div> <label>Angle of C = </label> <input class='field' autocomplete="off" autofocus name="C" type="text" onkeyup="enableButton()"> </div> <div> <label>Side Length of a = </label> <input class='field' autocomplete="off" autofocus name="a" type="text" onkeyup="enableButton()"> </div> <div> <label>Side Length of b = </label> <input class='field' autocomplete="off" autofocus name="b" type="text" onkeyup="enableButton()"> </div> <div> <label>Side Length of c = </label> <input class='field' autocomplete="off" autofocus name="c" type="text" onkeyup="enableButton()"> </div> <div> <button id='calculate' disabled="true" class='field' type="submit">Calculate</button> </div> </form> </div>

Answer 2

那 ？

我只是在form元素上加了一个id，把按钮的Id属性改成了name，这样我就只有for声明为const了

并删除表单中所有不必要的div，轻量级代码总是更容易阅读

 const myForm = document.getElementById('my-form') , inFields = [...myForm.querySelectorAll('input.field')] ; myForm.oninput=()=> { let count = inFields.reduce((a,c)=>a+=(c.value.trim().length >0)?1:0,0) myForm.calculate.disabled = (count <3) } myForm.onreset=()=> { myForm.calculate.disabled = true }

 label, input, button { display: block; float: left; margin: .3em; } label, button:first-of-type { clear: both; } label { width: 10em; line-height: 2.3em; text-align: right; }

 <form action="/" method="post" id="my-form"> <label>Angle of A = </label> <input class='field' autocomplete="off" autofocus name="A" type="number"> <label>Angle of B = </label> <input class='field' autocomplete="off" autofocus name="B" type="text"> <label>Angle of C = </label> <input class='field' autocomplete="off" autofocus name="C" type="text"> <label>Side Length of a = </label> <input class='field' autocomplete="off" autofocus name="a" type="text"> <label>Side Length of b = </label> <input class='field' autocomplete="off" autofocus name="b" type="text"> <label>Side Length of c = </label> <input class='field' autocomplete="off" autofocus name="c" type="text"> <button type="reset">reset</button> <button name='calculate' disabled="true" class='field' type="submit">Calculate</button> </form>

Answer 3

您可能在使用该函数时遇到了一些问题，但主要问题是您从未调用enableButton函数。 只要其中一个字段发生更改，下面的代码就会调用它。

 function enableButton() { let filled = 0; let fields = document.getElementsByClassName("field"); for (let i = 0; i < fields.length; i++) { if (fields[i].value != "") { filled++; } } if (filled > 2) { document.getElementById("calculate").removeAttribute("disabled"); } else { document.getElementById("calculate").setAttribute("disabled", ""); } }

 <div class='inputBox'> <form action="/" method="post"> <div> <label>Angle of A = </label> <input class='field' autocomplete="off" autofocus name="A" type="number" onchange="enableButton()"> </div> <div> <label>Angle of B = </label> <input class='field' autocomplete="off" autofocus name="B" type="text" onchange="enableButton()"> </div> <div> <label>Angle of C = </label> <input class='field' autocomplete="off" autofocus name="C" type="text" onchange="enableButton()"> </div> <div> <label>Side Length of a = </label> <input class='field' autocomplete="off" autofocus name="a" type="text" onchange="enableButton()"> </div> <div> <label>Side Length of b = </label> <input class='field' autocomplete="off" autofocus name="b" type="text" onchange="enableButton()"> </div> <div> <label>Side Length of c = </label> <input class='field' autocomplete="off" autofocus name="c" type="text" onchange="enableButton()"> </div> <div> <button id='calculate' type="submit" disabled>Calculate</button> </div> </form> </div>

Answer 4

你是如何调用函数的，还放了一个控制台日志来检查函数是否被调用。 也正如@certainPerformance 所说的 .length 是一个属性而不是一个函数