Question

听起来很容易，但不适合初学者程序员:)

我有一个简单的3字段表单，其中包含提交按钮和清除按钮。这是一项家庭作业，我们的任务是让“清除字段”按钮正常工作。以下是更具体的说明：

“为存储在名为clear的变量中的匿名函数添加JavaScript代码。该函数应使用$函数清除文本框，以获取每个文本框的Textbox对象，然后设置文本框的value属性然后，在onload事件处理程序中添加一个语句，该语句将clear函数附加到Clear Entries按钮的click事件。“

我能够将语句添加到onload事件处理程序：

window.onload = function () {
        $("calculate").onclick = calculateMpg;
        $("miles").focus();
        $("clear").onclick = clear;
    }

但这是我遇到问题的另一部分。

为匿名函数添加JavaScript代码，该函数存储在名为clear：

的变量中

var clear = function () {
        Object.Method   
        }

到目前为止，这是我的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>Calculate MPG</title>
    <link rel="stylesheet" href="mpg.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script>
        var $ = function (id) {
            return document.getElementById(id);
        }
        var calculateMpg = function () {
            var miles = parseFloat($("miles").value);

            var gallons = parseFloat($("gallons").value);

            if (isNaN(miles)) {
                alert("Miles: This must be a numeric value.");}
                else if (miles <0) {
                    alert("Miles: This number must be greater than 0.");}
                else if (isNaN(gallons)) {
                    alert("Gallons: This must be a numeric value.");}
                else if (gallons <0) {
                    alert("Gallons: This number must be greater than 0.");}
            else {
                var mpg = miles / gallons;
                $("mpg").value = mpg.toFixed(1);
            }
        }
        var clear = function () {
            miles.Text = String.Empty
        }

        window.onload = function () {
            $("calculate").onclick = calculateMpg;
            $("miles").focus();
            $("clear").onclick = clear;
        }
    </script>
</head>
<body>
    <section>
        <h1>Calculate Miles Per Gallon</h1>
        <label for="miles">Miles Driven:</label>
        <input type="text" id="miles"><br>
        <label for="gallons">Gallons of Gas Used:</label>
        <input type="text" id="gallons"><br>
        <label for="mpg">Miles Per Gallon</label>
        <input type="text" id="mpg" disabled><br>
        <label>&nbsp;</label>
        <input type="button" id="calculate" value="Calculate MPG"><br>
        <label>&nbsp;</label>
        <input type="button" id="clear" value="Clear Entries"><br>
    </section>
</body>
</html>

以下是我们提供的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculate MPG</title>
    <link rel="stylesheet" href="mpg.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
    <script>
        var $ = function (id) {
            return document.getElementById(id);
        }
        var calculateMpg = function () {
            var miles = parseFloat($("miles").value);
            var gallons = parseFloat($("gallons").value);

            if (isNaN(miles) || isNaN(gallons)) {
                alert("Both entries must be numeric");
            }
            else {
                var mpg = miles / gallons;
                $("mpg").value = mpg.toFixed(1);
            }
        }
        window.onload = function () {
            $("calculate").onclick = calculateMpg;
            $("miles").focus();
        }
    </script>
</head>
<body>
    <section>
        <h1>Calculate Miles Per Gallon</h1>
        <label for="miles">Miles Driven:</label>
        <input type="text" id="miles"><br>
        <label for="gallons">Gallons of Gas Used:</label>
        <input type="text" id="gallons"><br>
        <label for="mpg">Miles Per Gallon</label>
        <input type="text" id="mpg" disabled><br>
        <label>&nbsp;</label>
        <input type="button" id="calculate" value="Calculate MPG"><br>
    </section>
</body>
</html>

Answer 1

你有几个问题在继续：

您正在以不同的方式混合使用Javascript和jQuery。 jQuery的方法和对象的工作方式不同于＆＃34; pure＆＃34; Javascript，所以要注意这一点。
window.onload并没有按照您的方式运作。成为一致，用$(document).ready()方法做jQuery方式代替。
您错过了jQuery ID上的#指标。这是命令式或者它无法找到您正在呼叫的元素的ID。
您似乎正在将VB / C＃代码与您的javascript混合使用，例如作为String.Empty调用等。这些对象/方法起作用服务器而不是Javascript，这是另一个问题（它是一个因为我在C＃工作过，所以请仔细检查我。

以下是我的解决方案。我调整了一些内容来帮助我认为你正在寻找的东西（比如使用＆＃34清除所有字段;清除＆＃34;按钮而不仅仅是miles字段）。

我知道你是一名学生，所以不要习惯性地来到这里并试图找人为你做功课。你提供了一个尝试在一些代码中，有一些问题，所以我选择为你纠正它们并解释原因，因为有这么多。其他人并不慷慨，但我也曾经是一个苦苦挣扎的学生，所以当你把头撞到墙上时我会得到它。： - ）

$( document ).ready( function () {

var clear = function () {
    miles.value = "";
    gallons.value = "";
    mpg.value = "";
}

var calculateMpg = function () {
    var miles = parseFloat($("#miles").val());
    var gallons = parseFloat($("#gallons").val());
    if (isNaN(miles)) {
        alert("Miles: This must be a numeric value.");
    }
    else if (miles <0) {
        alert("Miles: This number must be greater than 0.");
    }
    else if (isNaN(gallons)) {
        alert("Gallons: This must be a numeric value.");
    }
    else if (gallons <0) {
        alert("Gallons: This number must be greater than 0.");}
    else {
        var mpg = miles / gallons;
        $("#mpg").val(mpg.toFixed(1));
    }
}

$("#calculate").bind("click", calculateMpg);
$("#miles").focus();
$("#clear").bind("click", clear);

        });

使用按钮清除表单的字段

1 个答案: