爲什麼從HTML <select>到Javascript沒有輸出？

我試圖用不同的價格爲每個selectedIndex進行選擇。爲什麼從HTML <select>到Javascript沒有輸出？

但是，只要我按數不起作用。我應該改變什麼？

問題在哪裏？我是否爲該功能選擇了錯誤的選項？

<div class="form"> 
 
    <form> 
 
    <div class="range1"> 
 
    <label for="range" class="label">Your points</label> 
 
    <input id="a" type="range" name="range" min="1300" max="2100" step="10" value="1400"> 
 
    <output for="range" class="output"></output> 
 
    </div> 
 
    <div class="range2"> 
 
    <label for="range" class="label">Desired Rank</label> 
 
    <input id="b" type="range" name="range1" min="1300" max="2100" step="10" value="1700"> 
 
    <output for="range1" class="output2"></output><br> 
 
<label for="range" class="label">Select your class: </label><br> 
 
<select id="classes" name="Class" class="label" style="width:300px;"> 
 
    <option selectedIndex="1">Blade Master</option> 
 
    <option selectedIndex="2">Kung Fu Master</option> 
 
    <option selectedIndex="3">Destroyer</option> 
 
    <option selectedIndex="4">Force Master</option> 
 
    <option selectedIndex="5">Assassin</option> 
 
    <option selectedIndex="6">Summoner</option> 
 
    <option selectedIndex="7">Blade Dancer</option> 
 
<option value="class4" disabled="disabled">Warlock</option> 
 
<option value="class4" disabled="disabled">Soul Fighter</option> 
 
</select> 
 
    </div> 
 
<br><br> 
 
    </form> 
 
<label for="range" class="label">Price: </label> 
 
<h2><p id="Answer">0€</p></h2> 
 
<p id="test"></p> 
 
<button class="label" type="button" onclick="onClick()">Count</button> 
 
<b><h4>* Zen Beans are included in price!</h4></b> 
 
</center> 
 
</div> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 

 
    
 

 
     <script> 
 
    $("[name=range]").on("change", function() { 
 
    $("[for=range]").val(this.value +" "); 
 
    }).trigger("change"); 
 

 
    $("[name=range1]").on("change", function() { 
 
    $("[for=range1]").val(this.value +" "); 
 
    }).trigger("change"); 
 
\t 
 
\t 
 
\t function onClick() { 
 
    var a = document.getElementById("a"); 
 
\t var b = document.getElementById("b"); 
 
\t var classes = document.getElementById("classes"); 
 
\t var aSelectedValue = a.value; 
 
\t var bSelectedValue = b.value; 
 
\t var SelectedClass = classes.selectedIndex; 
 

 
    
 
    if (SelectedClass == "1" && SelectedClass == "4") { 
 
\t \t \t \t 
 
\t \t \t \t if (aSelectedValue >= bSelectedValue) { 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "0€"; 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "Debug1"; 
 
\t \t \t } \t else if (bSelectedValue <= 1600) { 
 

 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.09375 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 1900 && bSelectedValue >=1600 && aSelectedValue < 1900 && aSelectedValue >= 1600) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.1875 + "€"; 
 
\t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500 && bSelectedValue >=1900 && aSelectedValue <= 2500 && aSelectedValue >= 1900) { 
 
\t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.625 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue >= 1300 && aSelectedValue <= 1600 && bSelectedValue <= 1900) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.09375 + (+bSelectedValue - 1600) * 0.1875 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue > 1600 && aSelectedValue <= 1900 && bSelectedValue <= 2500) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1900 - +aSelectedValue) * 0.1875 + (+bSelectedValue - 1900) * 0.625 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500) { 
 
\t \t \t \t 
 
\t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.09375 + (+bSelectedValue - 1900) * 0.625 + 56.25 + "€"; 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t 
 
\t } \t else if (SelectedClass == "2" && SelectedClass == "5") { 
 
\t \t 
 
\t \t \t \t if (aSelectedValue >= bSelectedValue) { 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "0€"; 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "Debug2"; 
 
\t \t \t } \t else if (bSelectedValue <= 1600) { 
 

 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.0825 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 1900 && bSelectedValue >=1600 && aSelectedValue < 1900 && aSelectedValue >= 1600) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.165 + "€"; 
 
\t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500 && bSelectedValue >=1900 && aSelectedValue <= 2500 && aSelectedValue >= 1900) { 
 
\t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.55 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue >= 1300 && aSelectedValue <= 1600 && bSelectedValue <= 1900) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.0825 + (+bSelectedValue - 1600) * 0.165 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue > 1600 && aSelectedValue <= 1900 && bSelectedValue <= 2500) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1900 - +aSelectedValue) * 0.165 + (+bSelectedValue - 1900) * 0.55 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500) { 
 
\t \t \t \t 
 
\t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.0825 + (+bSelectedValue - 1900) * 0.55 + 49.5 + "€"; 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t 
 
\t \t 
 
\t } else if (SelectedClass == "3" && SelectedClass == "6" && SelectedClass == "7") { 
 

 
if (aSelectedValue >= bSelectedValue) { 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "0€"; 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "Debug3"; 
 
\t \t \t } \t else if (bSelectedValue <= 1600) { 
 

 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.075 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 1900 && bSelectedValue >=1600 && aSelectedValue < 1900 && aSelectedValue >= 1600) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.15 + "€"; 
 
\t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500 && bSelectedValue >=1900 && aSelectedValue <= 2500 && aSelectedValue >= 1900) { 
 
\t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.5 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue >= 1300 && aSelectedValue <= 1600 && bSelectedValue <= 1900) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.075 + (+bSelectedValue - 1600) * 0.15 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue > 1600 && aSelectedValue <= 1900 && bSelectedValue <= 2500) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1900 - +aSelectedValue) * 0.15 + (+bSelectedValue - 1900) * 0.5 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500) { 
 
\t \t \t \t 
 
\t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.075 + (+bSelectedValue - 1900) * 0.5 + 45 + "€"; 
 
\t \t \t \t 
 
\t \t \t } 
 
\t 
 
\t 
 
} } 
 
</script>

來源

2016-02-15 user3740905

比較字符串是否大於另一個字符串很少打正確的結果。 – Teemu

這個條件將如何成爲'true'：'SelectedClass ==「1」&& SelectedClass ==「4」'？ –

我的壞....我沒有注意到^^ – user3740905

條件像SelectedClass == "1" && SelectedClass == "4"從來沒有成爲現實。我想你的意思是用||代替。還請注意，selectedClass從0開始。另請注意，classes.selectedIndex不返回選項的selectedIndex屬性。所以我將比較字符串更改爲整數並減1。下面是整體的變化：

<div class="form"> 
 
    <form> 
 
    <div class="range1"> 
 
    <label for="range" class="label">Your points</label> 
 
    <input id="a" type="range" name="range" min="1300" max="2100" step="10" value="1400"> 
 
    <output for="range" class="output"></output> 
 
    </div> 
 
    <div class="range2"> 
 
    <label for="range" class="label">Desired Rank</label> 
 
    <input id="b" type="range" name="range1" min="1300" max="2100" step="10" value="1700"> 
 
    <output for="range1" class="output2"></output><br> 
 
<label for="range" class="label">Select your class: </label><br> 
 
<select id="classes" name="Class" class="label" style="width:300px;"> 
 
    <option selectedIndex="1">Blade Master</option> 
 
    <option selectedIndex="2">Kung Fu Master</option> 
 
    <option selectedIndex="3">Destroyer</option> 
 
    <option selectedIndex="4">Force Master</option> 
 
    <option selectedIndex="5">Assassin</option> 
 
    <option selectedIndex="6">Summoner</option> 
 
    <option selectedIndex="7">Blade Dancer</option> 
 
<option value="class4" disabled="disabled">Warlock</option> 
 
<option value="class4" disabled="disabled">Soul Fighter</option> 
 
</select> 
 
    </div> 
 
<br><br> 
 
    </form> 
 
<label for="range" class="label">Price: </label> 
 
<h2><p id="Answer">0€</p></h2> 
 
<p id="test"></p> 
 
<button class="label" type="button" onclick="onClick()">Count</button> 
 
<b><h4>* Zen Beans are included in price!</h4></b> 
 
</center> 
 
</div> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 

 
    
 

 
     <script> 
 
    $("[name=range]").on("change", function() { 
 
    $("[for=range]").val(this.value +" "); 
 
    }).trigger("change"); 
 

 
    $("[name=range1]").on("change", function() { 
 
    $("[for=range1]").val(this.value +" "); 
 
    }).trigger("change"); 
 
\t 
 
\t 
 
\t function onClick() { 
 
    var a = document.getElementById("a"); 
 
\t var b = document.getElementById("b"); 
 
\t var classes = document.getElementById("classes"); 
 
\t var aSelectedValue = a.value; 
 
\t var bSelectedValue = b.value; 
 
\t var SelectedClass = classes.selectedIndex; 
 

 
    
 
    if (SelectedClass == 0 || SelectedClass == 3) { 
 
\t \t \t \t 
 
\t \t \t \t if (aSelectedValue >= bSelectedValue) { 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "0€"; 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "Debug1"; 
 
\t \t \t } \t else if (bSelectedValue <= 1600) { 
 

 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.09375 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 1900 && bSelectedValue >=1600 && aSelectedValue < 1900 && aSelectedValue >= 1600) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.1875 + "€"; 
 
\t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500 && bSelectedValue >=1900 && aSelectedValue <= 2500 && aSelectedValue >= 1900) { 
 
\t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.625 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue >= 1300 && aSelectedValue <= 1600 && bSelectedValue <= 1900) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.09375 + (+bSelectedValue - 1600) * 0.1875 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue > 1600 && aSelectedValue <= 1900 && bSelectedValue <= 2500) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1900 - +aSelectedValue) * 0.1875 + (+bSelectedValue - 1900) * 0.625 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500) { 
 
\t \t \t \t 
 
\t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.09375 + (+bSelectedValue - 1900) * 0.625 + 56.25 + "€"; 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t 
 
\t } \t else if (SelectedClass == 1 || SelectedClass == 4) { 
 
\t \t 
 
\t \t \t \t if (aSelectedValue >= bSelectedValue) { 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "0€"; 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "Debug2"; 
 
\t \t \t } \t else if (bSelectedValue <= 1600) { 
 

 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.0825 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 1900 && bSelectedValue >=1600 && aSelectedValue < 1900 && aSelectedValue >= 1600) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.165 + "€"; 
 
\t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500 && bSelectedValue >=1900 && aSelectedValue <= 2500 && aSelectedValue >= 1900) { 
 
\t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.55 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue >= 1300 && aSelectedValue <= 1600 && bSelectedValue <= 1900) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.0825 + (+bSelectedValue - 1600) * 0.165 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue > 1600 && aSelectedValue <= 1900 && bSelectedValue <= 2500) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1900 - +aSelectedValue) * 0.165 + (+bSelectedValue - 1900) * 0.55 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500) { 
 
\t \t \t \t 
 
\t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.0825 + (+bSelectedValue - 1900) * 0.55 + 49.5 + "€"; 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t 
 
\t \t 
 
\t } else if (SelectedClass == 2 || SelectedClass == 5 || SelectedClass == 6) { 
 

 
if (aSelectedValue >= bSelectedValue) { 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "0€"; 
 
\t \t \t \t document.getElementById("Answer").innerHTML = "Debug3"; 
 
\t \t \t } \t else if (bSelectedValue <= 1600) { 
 

 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.075 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 1900 && bSelectedValue >=1600 && aSelectedValue < 1900 && aSelectedValue >= 1600) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.15 + "€"; 
 
\t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500 && bSelectedValue >=1900 && aSelectedValue <= 2500 && aSelectedValue >= 1900) { 
 
\t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (+bSelectedValue - +aSelectedValue) * 0.5 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue >= 1300 && aSelectedValue <= 1600 && bSelectedValue <= 1900) { 
 
\t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.075 + (+bSelectedValue - 1600) * 0.15 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (aSelectedValue > 1600 && aSelectedValue <= 1900 && bSelectedValue <= 2500) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t document.getElementById("Answer").innerHTML = (1900 - +aSelectedValue) * 0.15 + (+bSelectedValue - 1900) * 0.5 + "€"; 
 
\t \t \t \t \t 
 
\t \t \t } \t else if (bSelectedValue <= 2500) { 
 
\t \t \t \t 
 
\t \t \t \t document.getElementById("Answer").innerHTML = (1600 - +aSelectedValue) * 0.075 + (+bSelectedValue - 1900) * 0.5 + 45 + "€"; 
 
\t \t \t \t 
 
\t \t \t } 
 
\t 
 
\t 
 
} } 
 
</script>

來源

2016-02-15 16:14:09

謝謝，像一個魅力工作！ – user3740905

你的！所以將其標記爲答案。 –

爲什麼從HTML <select>到Javascript沒有輸出？

回答

相關問題