个人中心
gpt4 book ai didi

javascript - 使用按钮清除表单字段

转载 作者：行者123 更新时间：2023-12-01 05:49:03 25 4
gpt4 key购买 nike

听起来可能很简单，但对于初学者程序员来说并不好:)

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

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

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

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

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

为存储在名为clear的变量中的匿名函数添加 JavaScript 代码:

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>

最佳答案

您遇到了几个问题:

  1. 您以不太有效的方式混合了 Javascript 和 jQuery。jQuery 的方法和对象的工作方式与“纯”不同JavaScript，所以要注意这一点。

  2. window.onload 无法按照您的方式工作。成为一致，使用 $(document).ready() 方法以 jQuery 方式进行操作反而。

  3. 您的 jQuery ID 上缺少 # 指示符。这是命令式的，否则它将找不到您正在调用的元素的 ID。

  4. 看起来您正在将 VB/C# 代码与 JavaScript 混合在一起，例如作为 String.Empty 调用等。这些对象/方法从服务器而不是 JavaScript，所以这是另一个问题(这是一个因为我一直在 C# 工作，所以请仔细检查我)。

下面是我的解决方案。我调整了一些内容来帮助实现我认为您想要的功能(例如使用“清除”按钮清除所有字段，而不仅仅是英里字段)。

我知道你是一名学生，所以不要养成来这里找人帮你做作业的习惯。你确实提供了一些代码的尝试，其中问题比较多，所以我选择给大家纠正一下，并解释一下原因，因为问题比较多。其他人没有那么慷慨，但我也曾经是一个苦苦挣扎的学生，所以当你用头撞墙时我明白了。 :-)

$( 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);

        });

关于javascript - 使用按钮清除表单字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24060917/

25 4 0
文章推荐： python - 使用 argparse 折叠多个选项
文章推荐： asp.net - Angular & Asp.Net Core - 启用 2 因素身份验证
文章推荐： .net - 如何在 .Net 中构建登录硬件 token 的模拟
文章推荐： javascript - 即使 JSON 格式正确，Select2 也不显示 AJAX 结果
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com