現在選択されているオプションの値を持つ関数を実行

Question

オプションを選択しても、「選択してください」というメッセージが表示されます。 これは1つのドロップダウンリストでしか動作しませんが、2つ以上の場合に問題があります。

（実施例では、変数スポーツはのdocument.getElementById（「スポーツ」）と一つだけのドロップダウンリストである）

問題は何ですか？

<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

TAGを使用しているので、jQueryの使用についてはどうですか？

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です。