使用javascript中的单选按钮进行计算

时间:2013-05-16 02:42:04

标签: javascript html

我已经在这工作了几个小时而且我不能,因为我的生活如何做到这一点。

所以,我想在java脚本中进行计算(在HTML的背面)。我想知道如何让单选按钮有机会获得许多变量的价值。 E.G(选中女性单选按钮,var a = 10,var x = 20等等,但是如果检查了男性单选按钮,var a = 34,var x = 32等等)

还有这个我想知道我是否可以做一个很长的总和,例如(bmr = a +(x * weight)+(y * height) - (z * age))。然后最后在不同的文本字段上显示所有这些信息。

HTML

<!DOCTYPE html PUBLIC>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html;         charset=utf-8" />
        <title>Untitled Document</title>
        <SCRIPT type="text/javascript" src="jstest.js">

        </SCRIPT>
    </head>

    <body>
        <form action="" method="post" name="caloriecalc">
            <table>
                <tr>
                    <td>Age:</td>
                    <td>
                        <input type="text" name="age" size="5" />
                    </td>
                </tr>
                <tr>
                    <td>Gender:</td>
                    <td>
                        <label>
                            <input type="radio" name="gender" value="male" />Male</label>
                        <br />
                        <label>
                            <input type="radio" name="gender" value="female" />Female</label>
                        <br />
                    </td>
                </tr>
                <tr>
                    <td>Weight:</td>
                    <td>
                        <input type="text" name="weight" size="7" />KG</td>
                </tr>
                <tr>
                    <td>Height:</td>
                    <td>
                        <input type="text" name="height" size="7" />CM</td>
                </tr>
                <tr>
                    <td>
                        <label>Exercise Level:</label>
                    </td>
                    <td>
                        <select name="activity">
                            <option value="1.2">Sedentary (little or no exercise)</option>
                            <option value="1.375">Lightly active (exercise/sports 1-3 days/wk</option>
                            <option value="1.55">Mod. active (exercise/sports 3-5 days/wk)</option>
                            <option value="1.725">Very active (exercise/sports 6-7 days/wk)</option>
                            <option value="1.9">Extr. Active (daily exercise/sports & physical job))</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input name="calc" type="button" value="Calculate" onclick="validate()" />
                    </td>
                </tr>
                <tr>
            </table>
        </form>
        <table width="100%">
            <tr>
                <td width="50%" align="right">BMR</td>
                <td width="50%" id="bmr"></td>
            </tr>
        </table>
    </body>

</html>

JAVASCRIPT

function validate() {
    var age = document.caloriecalc.age.value;
    var weight = document.caloriecalc.weight.value;
    var height = document.caloriecalc.height.value;

    if (age <= 0 || parseInt(age) != age) {
        alert("Please enter a valid age.");
    } else if (weight <= 0 || isNaN(Number(weight))) {
        alert("Please enter a valid weight.");
    } else if (height <= 0 || isNaN(Number(height))) {
        alert("Please enter a valid height.");

    } else { //all the data has been validated
        calculate(parseInt(age), parseFloat(weight), parseFloat(height));
    }
}

function calculate(age, weight, height) {

}

2 个答案:

答案 0 :(得分:1)

尝试类似

的内容
function validate() {
    var i , gender;
    var age = document.caloriecalc.age.value;
    var weight = document.caloriecalc.weight.value;
    var height = document.caloriecalc.height.value;

    for(i = 0; i < document.caloriecalc.gender.length; i++){
        if(document.caloriecalc.gender[i].checked){
            gender = document.caloriecalc.gender[i].value;
        }
    }

    if (age <= 0 || parseInt(age) != age) {
        alert("Please enter a valid age.");
    } else if (!gender) {
        alert("Please enter a valid gender.");
    } else if (weight <= 0 || isNaN(Number(weight))) {
        alert("Please enter a valid weight.");
    } else if (height <= 0 || isNaN(Number(height))) {
        alert("Please enter a valid height.");
    } else { //all the data has been validated
        calculate(parseInt(age), parseFloat(weight), parseFloat(height), gender);
    }
}

function calculate(age, weight, height, gender) {
    var a, x, y = 1, z = 1;
    switch(gender){
        case "male":
            a= 34;
            x =32;
            break;
        case "female":
            a= 10;
            x =20;
            break;
    }

    var bmr = a + (x * weight) + (y * height) - (z * age);
    document.getElementById('bmr').innerHTML = bmr;
}

演示:Fiddle

注意:我不知道yz的价值,因为您没有提及它们

答案 1 :(得分:0)

您可以使用以下方法获取单选按钮的值: -

 var lengthh=document.caloriecalc.gender.length;
 for(var i=0;i<lengthh;i++){
        if(document.caloriecalc.gender[i].checked){
            gender = document.caloriecalc.gender[i].value;
        }
    }

现在将值传递给calculate函数,并进行如下计算: -

function calculate(age, weight, height, gender) {
    var a=0, x=0, y = 1, z = 1;
    if(gender=='male'){        
            a= 34;
            x =32;
           }else{
            a= 10;
            x =20;            
           }

    //Now the result is
    var resultt = a + (x * weight) + (y * height) - (z * age);
    document.getElementById('bmr').innerHTML = resultt;

}

希望它会对你有所帮助。