带有/单选按钮和文本框的 Javascript 表单计算器答案

【问题标题】：Javascript Form Calculation w/Radio Buttons & Textboxes带有/单选按钮和文本框的 Javascript 表单计算器
【发布时间】：2012-05-16 01:46:49
【问题描述】：

jQuery 库未正确导入，单击按钮时表单未在 BAC 字段中显示答案。从这一点来看，答案应该是比较简单的。请检查 BAC 字段的显示代码。

    <html>
    <head>
    <meta charset="utf-8" />
    <title>bac2</title>
    </head>
    <body>
    <p></p>
        <form action="" id="bacForm">
        <input type="radio" name="gender" value="male" /> Male<br /><br>
        <input type="radio" name="gender" value="female" /> Female<br><br>
        Weight <input type="text" name="weight" id="weight"/><br><br>
        Hours  <input type="text" name="hours" id="hours" /><br><br>
        Drinks <input type="text" name="drinks" id="drinks"/><br><br>
        <INPUT TYPE="button" value="submit" name="submit"><br><br>
        BAC: <input type="text" name="bac" id="bac"/>

        </form>         

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>           
    <script type="text/javascript">
            $('#submit').click(function(){

        var gender = $('input[name=gender]:checked', '#bacForm').val();
        var weight = parseInt($('#weight').val()) || 0;
        var hours = parseInt($('#hours').val()) || 0;
        var drinks = parseInt($('#drinks').val()) || 0;
        var bac = 0;

        if (gender=="male"){
            bac = ((drinks * .06 * 100 * 1.055) / (weight * .68)) - (0.015 * hours);
        }else if(gender=="female"){
            bac = ((drinks * .06 * 100 * 1.055) / (weight * .55)) - (0.015 * hours);
        }
        $('#bac').val(bac);

    });


    </script>   






    </body>
    </html>

【问题讨论】：

标签： javascript jquery html forms javascript-events

【解决方案1】：

我确定您只是在学习 JS，但是您以一种非常不必要、令人费解和复杂的方式编写了所有这些代码。您可以大大简化该代码，请参见以下示例（注意我使用 jQuery 只是为了更容易获取值）

// get values
var bac = 0;
var gender = $('input[name="gender"]:checked').val();
var weight = $('#weight').val();
var hours = $('#hours').val();
var drinks = $('#drinks').val();

// calculate bac
if ( gender == 'male' ) {
    bac = ((drinks * .06 * 100 * 1.055) / (weight * .68)) - (0.015 * hours);
}
else {
    bac = ((drinks * .06 * 100 * 1.055) / (weight * .55)) - (0.015 * hours);
}

// round to 2 decimal places
bac = Math.round(bac * 100) / 100;

$('#bac').val(bac);

你可以在http://jsfiddle.net/dYhpC/看到这个直播

【讨论】：

你先生，太棒了。感谢您推荐 jQuery。从现在开始我可能应该使用它。
嵌入时遇到问题。嵌入后，当我单击提交时，表单会自行重置。有什么建议么？ Javascript 控制台显示 $function 未定义。
你是否正确地包含了 jQuery？
我是这么认为的，请看上面更新的代码。不过我没有使用你的四舍五入。
你应该把你的脚本放在head标签里，别忘了jQuery的ready函数：$(function() { })

【解决方案2】：

回答您的问题：是的，确实可以使用单选按钮和文本框中的值来执行计算。

对于您的具体情况，您需要提出更具体的问题。尝试在您的代码中放置一些断点，看看它在执行时会发生什么……当发布一个问题时，请告诉我们它在哪里做了与您的期望不同的事情。

【讨论】：

好的。该代码是根据男性或女性值和输入数值的文本框计算血液酒精含量。依次输出血液酒精含量百分比。
@noahtk - 是的，我收集到了 :) 你需要在这里付出一些努力......在调试器中运行你的代码并告诉我们它的作用与你的期望不同跨度>
我是这么想的，但问题是它甚至不会运行。
好的...那么你得到什么错误信息？为您使用的任何浏览器打开 javascript 控制台，查看错误消息
Javascript 控制台中未定义 $(function()。不知道如何解决。我认为我的问题可能是嵌入。

【解决方案3】：

你说你正在寻找简单的，所以我拼凑了一个快速的 jQuery fiddle，展示了一个更简单的方法。在这里查看：http://jsfiddle.net/brianmat/rQLtE/

主要代码如下

$('#submit').click(function(){

    var gender = $('input[name=gender]:checked', '#bacForm').val();
    var weight = parseInt($('#weight').val()) || 0;
    var hours = parseInt($('#hours').val()) || 0;
    var drinks = parseInt($('#drinks').val()) || 0;
    var bac = 0;

    if (gender=="male"){
        bac = ((drinks * .06 * 100 * 1.055) / (weight * .68)) - (0.015 * hours);
    }else if(gender=="female"){
        bac = ((drinks * .06 * 100 * 1.055) / (weight * .55)) - (0.015 * hours);
    }
    $('#answer').val(bac);

});

【讨论】：

我尝试将它嵌入到 jsFiddle 的 html 中，单击提交时它没有做任何事情。 $(function() 在 Javascript 控制台中未定义。
您是否包含了对 jQuery 库的引用？您可以在这里找到一些示例和快速概览docs.jquery.com/How_jQuery_Works
不，我无法成功地做到这一点。我在代码上方试过这个：
从提交按钮更改为常规按钮<INPUT TYPE="button" name="submit" id="submit" value="submit">
$('#answer').val(bac); 变为 $('#bac').val(bac); - 这是一个 jQuery 选择器，允许您选择一个（或多个）控件。 $('#bac') 查找名为“bac”的控件。确保您检查了与小提琴相比的控件名称，因为它们可能已经更改以使事情更加清晰和一致。

【解决方案4】：

这是成品：http://bac.klinetel.com/；我必须说一个不错的大学工具。

【讨论】：