Question

我是Javascript的初学者，这是我的第一个Javascript，不仅仅是'剪切/粘贴/黑客'。我创建了一个计算器，在输入输入时更新输出，当输入框模糊然后聚焦时，我可以清除所有“答案盒”，但是如果我将值退出输入框，“答案框”仍会显示'答案'基于最后一个字符。被退格的价值。

在我的'validiateTheInput'功能中。我可以声明一个'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：

<div id="calculator">

        <form name="calculate">
            <label for="total">Total Value to Calculate:</label> &nbsp&nbsp&nbsp&nbsp 
            <input id="totalFeet" type="text" name="total" size="15" onfocus="clearBoxes(totalFeet, answerbox, answerbox1, answerbox2);"><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>

</div>

Answer 1

问题是你没有将元素对象存储在变量中 - 你要存储它们的值：

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

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

clearBoxes(answerbox, answerbox1, answerbox2, totalFeetField);

......你没有传递元素。您可以通过删除变量作业中每一行的.value来解决此问题。

工作演示：http://jsfiddle.net/AndyE/Mq6uN/

旁注和无耻插件：如果你想要比keyup更强大的东西来检测输入，请查看this blog post。

Answer 2

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

Answer 3

这是一个完整的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>

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

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

3 个答案: