Javascript 值退格时清除其他文本框时出现问题

我是Javascript的初学者，这是我第一个不只是“剪切/粘贴/破解”的Javascript。我创建了一个计算器，可以在输入时更新输出，当输入框模糊然后聚焦时，我可以清除所有的“应答框”，但如果我将输入框中的值退格，则“应答框”仍会根据最后一个字符显示“答案”。已退格的值

在我的“ValidiateInput”函数中。我可以声明一个'if=“3”'来清除它们，当'3'是值时它就工作了（这最终不起作用：），但是如果字段显示为空，我似乎无法捕获它，请用户从框中退格值

我是在痴迷于一些愚蠢的事情，还是只是错过了一些东西

以下是全部内容（包括一些基本的HTML）： 在验证函数中也有一些过度使用的地方，因为我正在尝试捕捉“空白输入”以进行退格

//jQuery keyup to grab input
$(document).ready(function() {
    $('#totalFeet').keyup(function() {
        validiateTheInput();
    });
});

//clear calculated values    


function clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField) {
    answerbox.value = "";
    answerbox1.value = "";
    answerbox2.value = "";
    totalFeetField.value = "";
};

//validate input, then go to callAll (calc the output and display it)


function validiateTheInput() {
    var totalFeetField = document.getElementById('totalFeet');
    var answerbox = document.getElementById('answerbox').value;
    var answerbox1 = document.getElementById('answerbox1').value;
    var answerbox2 = document.getElementById('answerbox2').value;

    // feel like I should be able to catch it here with the length prop.
    if (totalFeetField.value.length == 0) {
        clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);
    }

    // if input is usable, do the good stuff...
    if (totalFeetField.value != "" && !isNaN(totalFeetField.value)) {
        callAll(); // call the function that calcs the boxes, etc.
    }

    // if input is NaN then alert and clear boxes (clears because a convenient blur event happens)
    else if (isNaN(totalFeetField.value)) {
        alert("The Total Sq. Footage Value must be a number!")
        document.getElementById('totalFeet').value = "";
    }

    // clears the input box (I wish) if you backspace the val. to nothing
    else if (totalFeetField.value == '3') {
        clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);
    }
    // extra effort trying to catch that empty box :(   
    else if (typeof totalFeetField.value == 'undefined' || totalFeetField.value === null || totalFeetField.value === '') clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);
}


//group all box calc functions for easy inline call


function callAll() {
    calcFirstBox();
    calcSecondBox();
    calcThirdBox();
}

// calculate box fields based on input box


function calcFirstBox() {
    var totalFeetField = document.getElementById('totalFeet');
    var answer = totalFeetField.value * 5.95; // set multiplier
    document.getElementById('answerbox').value = answer.toFixed(2);
}

// calc the second box


function calcSecondBox() {
    var totalFeetField = document.getElementById('totalFeet');
    var answer = totalFeetField.value * 18.95; // set multiplier
    document.getElementById('answerbox1').value = answer.toFixed(2);
}

// calc the third box


function calcThirdBox() {
    var totalFeetField = document.getElementById('totalFeet');
    var answer = totalFeetField.value * 25.95; // set multiplier
    document.getElementById('answerbox2').value = answer.toFixed(2);
}

HTML:

要计算的总值：



总价值X$5.95:$



总价值X$18.95:$



总价值X$25.95:$

问题在于您没有将元素对象存储在变量中，而是存储它们的值：

var answerbox = document.getElementById('answerbox').value;
var answerbox1 = document.getElementById('answerbox1').value;
var answerbox2 = document.getElementById('answerbox2').value;

…因此，稍后，当您调用以下函数时，将这些变量作为参数传递：

clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);

…您没有传递元素。您可以通过删除变量赋值中每一行的

.value

来修复它

工作演示：

---

旁注和无耻的插件：如果您想要比keyup更健壮的东西来检测输入，请查看。

问题在于您没有将元素对象存储在变量中-您正在存储它们的值：

var answerbox = document.getElementById('answerbox').value;
var answerbox1 = document.getElementById('answerbox1').value;
var answerbox2 = document.getElementById('answerbox2').value;

…因此，稍后，当您调用以下函数时，将这些变量作为参数传递：

clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);

…您没有传递元素。您可以通过删除变量赋值中每一行的

.value

来修复它

工作演示：

---

旁注和无耻的插件：如果您想要比keyup更健壮的东西来检测输入，请检查。

您将answerbox、answerbox1等的值传递给ClearBox函数，而不是元素本身。

您将answerbox、answerbox1等的值传递给ClearBox函数，不是元素本身。

这里有一个完整的jQuery方法：

//jQuery keyup to grab input
    $(document).ready(function () {
        $('input[id$=totalFeet]').keyup(function () {
            validiateTheInput();
        });
        function clearBoxes() {
            $('input[id$=answerbox]').val("");
            $('input[id$=answerbox1]').val("");
            $('input[id$=answerbox2]').val("");
        }
        //validate input, then go to callAll (calc the output and display it)
        function validiateTheInput() {
            var totalFeetField = $('input[id$=totalFeet]').val();
            var answerbox = $('input[id$=answerbox]').val();
            var answerbox1 = $('input[id$=answerbox1]').val();
            var answerbox2 = $('input[id$=answerbox2]').val();

            // feel like I should be able to catch it here with the length prop.
            if (totalFeetField == "") {
                clearBoxes();
            }

            // if input is usable, do the good stuff...
            if (totalFeetField != "" && !isNaN(totalFeetField)) {
                callAll(); // call the function that calcs the boxes, etc.
            }

            // if input is NaN then alert and clear boxes (clears because a convenient blur event happens)
            else if (isNaN(totalFeetField)) {
                alert("The Total Sq. Footage Value must be a number!")
                $('input[id$=totalFeet]').val(""); 
            }

            // clears the input box (I wish) if you backspace the val. to nothing
            else if (totalFeetField == '3') {
                clearBoxes();
            }
            // extra effort trying to catch that empty box :(   
            else if (typeof totalFeetField == 'undefined' || totalFeetField === null || totalFeetField === '')
                clearBoxes();
        }
        //group all box calc functions for easy inline call
        function callAll() {
            calcFirstBox();
            calcSecondBox();
            calcThirdBox();
        }

        // calculate box fields based on input box
        function calcFirstBox() {
            var totalFeetField = $('input[id$=totalFeet]').val(); 
            var answer = totalFeetField * 5.95; // set multiplier

            $('input[id$=answerbox]').val(answer.toFixed(2));
        }

        // calc the second box
        function calcSecondBox() {
            var totalFeetField = $('input[id$=totalFeet]').val(); 
            var answer = totalFeetField * 18.95; // set multiplier

            $('input[id$=answerbox1]').val(answer.toFixed(2));
        }

        // calc the third box
        function calcThirdBox() {
            var totalFeetField = $('input[id$=totalFeet]').val(); 
            var answer = totalFeetField * 25.95; // set multiplier

            $('input[id$=answerbox2]').val(answer.toFixed(2));
        }
    });

还有，这里是HTML

<form name="calculate" action="">
        <label for="total">Total Value to Calculate:</label> &nbsp&nbsp&nbsp&nbsp 
        <input id="totalFeet" type="text" name="total" size="15" onfocus="clearBoxes();"/><br /><br />


        <label for="answerbox">Total Value X &nbsp;$5.95:&nbsp&nbsp&nbsp&nbsp$</label>
        <input id="answerbox" onfocus="this.blur();" type="text" name="answerbox" size="15"/><br /><br />

        <label for="answerbox1">Total Value X $18.95:&nbsp&nbsp&nbsp$</label>
        <input id="answerbox1" onfocus="this.blur();" type="text" name="answerbox1" size="15"/><br /><br />

        <label for="answerbox2">Total Value X $25.95:&nbsp&nbsp&nbsp$</label>
        <input id="answerbox2" onfocus="this.blur();" type="text" name="answerbox2" size="15"/>
    </form>

要计算的总值：



总价值X$5.95:$



总价值X$18.95:$



总价值X$25.95:$

---

有时候混合使用jQuery和普通javascript并不太好。当第一个文本框为空时，此代码将用于清除文本框。它还可以用于数字验证。

这里有一个完整的jQuery方法：

//jQuery keyup to grab input
    $(document).ready(function () {
        $('input[id$=totalFeet]').keyup(function () {
            validiateTheInput();
        });
        function clearBoxes() {
            $('input[id$=answerbox]').val("");
            $('input[id$=answerbox1]').val("");
            $('input[id$=answerbox2]').val("");
        }
        //validate input, then go to callAll (calc the output and display it)
        function validiateTheInput() {
            var totalFeetField = $('input[id$=totalFeet]').val();
            var answerbox = $('input[id$=answerbox]').val();
            var answerbox1 = $('input[id$=answerbox1]').val();
            var answerbox2 = $('input[id$=answerbox2]').val();

            // feel like I should be able to catch it here with the length prop.
            if (totalFeetField == "") {
                clearBoxes();
            }

            // if input is usable, do the good stuff...
            if (totalFeetField != "" && !isNaN(totalFeetField)) {
                callAll(); // call the function that calcs the boxes, etc.
            }

            // if input is NaN then alert and clear boxes (clears because a convenient blur event happens)
            else if (isNaN(totalFeetField)) {
                alert("The Total Sq. Footage Value must be a number!")
                $('input[id$=totalFeet]').val(""); 
            }

            // clears the input box (I wish) if you backspace the val. to nothing
            else if (totalFeetField == '3') {
                clearBoxes();
            }
            // extra effort trying to catch that empty box :(   
            else if (typeof totalFeetField == 'undefined' || totalFeetField === null || totalFeetField === '')
                clearBoxes();
        }
        //group all box calc functions for easy inline call
        function callAll() {
            calcFirstBox();
            calcSecondBox();
            calcThirdBox();
        }

        // calculate box fields based on input box
        function calcFirstBox() {
            var totalFeetField = $('input[id$=totalFeet]').val(); 
            var answer = totalFeetField * 5.95; // set multiplier

            $('input[id$=answerbox]').val(answer.toFixed(2));
        }

        // calc the second box
        function calcSecondBox() {
            var totalFeetField = $('input[id$=totalFeet]').val(); 
            var answer = totalFeetField * 18.95; // set multiplier

            $('input[id$=answerbox1]').val(answer.toFixed(2));
        }

        // calc the third box
        function calcThirdBox() {
            var totalFeetField = $('input[id$=totalFeet]').val(); 
            var answer = totalFeetField * 25.95; // set multiplier

            $('input[id$=answerbox2]').val(answer.toFixed(2));
        }
    });

还有，这里是HTML

<form name="calculate" action="">
        <label for="total">Total Value to Calculate:</label> &nbsp&nbsp&nbsp&nbsp 
        <input id="totalFeet" type="text" name="total" size="15" onfocus="clearBoxes();"/><br /><br />


        <label for="answerbox">Total Value X &nbsp;$5.95:&nbsp&nbsp&nbsp&nbsp$</label>
        <input id="answerbox" onfocus="this.blur();" type="text" name="answerbox" size="15"/><br /><br />

        <label for="answerbox1">Total Value X $18.95:&nbsp&nbsp&nbsp$</label>
        <input id="answerbox1" onfocus="this.blur();" type="text" name="answerbox1" size="15"/><br /><br />

        <label for="answerbox2">Total Value X $25.95:&nbsp&nbsp&nbsp$</label>
        <input id="answerbox2" onfocus="this.blur();" type="text" name="answerbox2" size="15"/>
    </form>

要计算的总值：



总价值X$5.95:$



总价值X$18.95:$



总价值X$25.95:$

---

有时候混合使用jQuery和普通javascript并不太好。当第一个文本框为空时，此代码将用于清除文本框。它也适用于数字验证。

“有时候混合使用jQuery和普通javascript并不太好”-我不想粗鲁，但你没有提供很好的论据；您的jQuery选择器非常糟糕。首先，为什么要对唯一ID使用“attribute ends with”选择器？其次，您没有对jQuery对象进行任何缓存，因此可能会多次运行这个性能较差的选择器，最后，您的代码不会比OP的原始JavaScript特别短。混合适量的JavaScript和jQuery绝对有助于最大限度地提高性能和效率。非常感谢您的回复，我本来打算清理内联调用，但今天早上它没有起作用：）我还没有完全研究您的帖子，但是这不会让我现在应用jquery效果变得更容易一些吗？@Andy E:关于缓存jquery对象，你说得对。我忘了做那件事。另外，关于我的选择器，我使用ASP.NET中的选择器，因为ASP.NET会向id标记添加额外的信息，而$（#section.control）等普通选择器并不总是会显示这些信息。我知道OP没有使用ASP.NET，但我只是习惯性地使用这些选择器。我也为jQuery和javascript的混合声明表示歉意。“有时候jQuery和普通javascript的混合效果不太好”-我不想粗鲁，但你没有提供很好的论据；您的jQuery选择器非常糟糕。首先，为什么要对唯一ID使用“attribute ends with”选择器？其次，您没有对jQuery对象进行任何缓存，因此可能会多次运行这个性能较差的选择器，最后，您的代码不会比OP的原始JavaScript特别短。混合适量的JavaScript和jQuery绝对有助于最大限度地提高性能和效率。非常感谢您的回复，我本来打算清理内联调用，但今天早上它没有起作用：）我还没有完全研究您的帖子，但是这不会让我现在应用jquery效果变得更容易一些吗？@Andy E:关于缓存jquery对象，你说得对。我忘了做那件事。另外，关于我的选择器，我使用那些与ASP.NET一起使用的选择器，因为ASP.NET向id标记添加了额外的信息，而普通选择器，如$（#section.control）d