JavaScript Form Calculation with Radio Buttons & Textbox

JavaScript Form Calculation with Radio Buttons & Textboxes

本文关键字：amp Textbox Buttons Radio Form Calculation with JavaScript      更新时间：2023-09-26
单击

按钮时，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>

我敢肯定你只是在学习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小提琴放在一起，展示了一种更简单的方法。 在这里查看： 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);
});

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

相关文章：