Question

即使我选择了一个选项，它仍会提示“请选择一些内容”。我只使用了一个下拉列表，但是当有两个或更多时，我会遇到问题。

（在工作示例变量sport中是document.getElementById（“sports”）并且只有一个下拉列表）

问题是什么？

<script type="text/javascript">   
function check() {
    sport = document.getElementsByClassName("sports");
    sport_selected = sport.selectedIndex; 
    weight = document.getElementById("weight").value;
    time = document.getElementById("time").value;
    if (sport_selected > 0) {
        if (isNaN(weight, time)) {
        alert("Error. This is not a number.");
        }
        else { 
        met = sport.options[sport_selected].value;
        calculations = (time * ((met * 3.5 * weight)/200));  
        result = Math.round(calculations);
        document.lastform.output.value = result + " kcal";
        }
    }
    else {
        alert("Please choose something.")
    } 
});
</script> 
<div id="tabs">     
<ul>
    <li><a href="#tabs-1">Running</a></li>
    <li><a href="#tabs-2">Walking</a></li>  
</ul>                   
<div id="tabs-1">
<form name="form1">
    <select class="sports">
        <option value="">-Choose-</option>
        <option value="6">Jog/walk combination</option>
        <option value="7">Jogging, general</option>
        <option value="8">Running, 5 mph (12 min/miile)</option>
        <option value="9">Running, 5.2 mph (11.5 min/mile)</option>
        <option value="10">Running, 6 mph (10 min/mile)</option>
  </select>
</form>
</div>
<div id="tabs-2">
<form name="form2">
    <select class="sports">
        <option value="">-Choose-</option>
        <option value="2">Walking, general</option>
        <option value="2">Walking, 1 mph</option>
  </select>
</form>
</div>
</div>  
<form name="lastform">
<label for="weight">Weight [kg]:</label><br />
<input type="text" size="3" id="weight"><br />   
<label for="time">Duration [min]:</label><br />
<input type="text" size="3" id="time">
<input type="button" value="Calc" onClick="check()"><br /><br />
<label for="kcal">You have burned:</label><br />
<input type="text" id="output">
</form>

Answer 1

getElementsByClassName返回一个集合，但不仅仅是一个项目，如果你有更多的控件，你需要编写代码来迭代集合。请检查：https://developer.mozilla.org/en/DOM/document.getElementsByClassName

Answer 2

使用jQuery怎么样，因为你已经使用了TAG？

HTML

<div id="tabs">     
<ul>
    <li><a href="#tabs-1">Running</a></li>
    <li><a href="#tabs-2">Walking</a></li>  
</ul>                   
<div id="tabs-1">
<form name="form1">
    <select class="sports">
        <option value="">-Choose-</option>
        <option value="6">Jog/walk combination</option>
        <option value="7">Jogging, general</option>
        <option value="8">Running, 5 mph (12 min/miile)</option>
        <option value="9">Running, 5.2 mph (11.5 min/mile)</option>
        <option value="10">Running, 6 mph (10 min/mile)</option>
  </select>
</form>
</div>
<div id="tabs-2">
<form name="form2">
    <select class="sports">
        <option value="">-Choose-</option>
        <option value="2">Walking, general</option>
        <option value="2">Walking, 1 mph</option>
  </select>
</form>
</div>
</div>  
<form name="lastform">
<label for="weight">Weight [kg]:</label><br />
<input type="text" size="3" id="weight"><br />   
<label for="time">Duration [min]:</label><br />
<input type="text" size="3" id="time">
<input type="button" value="Calc" id="check"><br /><br />
<label for="kcal">You have burned:</label><br />
<input id="result" type="text" id="output">
</form>

<强>的javascript

$("#check").click(function() {

    var sport_selected = $(".sports option:selected").val();
    var weight = $("#weight").val();
    time = $("#time").val();
    if (parseInt(sport_selected) > 0) {
        if (isNaN(weight, time)) {
            alert("Error. This is not a number.");
        }
        else {
            var met = sport_selected
            calculations = (time * ((met * 3.5 * weight) / 200));
            result = Math.round(calculations);
            $("#result").val(result + " kcal");
        }
    }
    else {
        alert("Please choose something.")
    }
});

这是fiddle。

使用当前所选选项的值执行功能

2 个答案: