Javascript積分計算器無法使用（HTML選項/選項+ Javascript）

Question

來自瑞典的下午好！ 我有一個JavaScript代碼給了我「NaN」的問題，同時試圖讓它從我的成績中算出我的積分。它應該檢查它是哪一個分數，然後拿出它的價值，並將其添加到最終得分中，當按下按鈕時將被提醒。 使用Javascript：

var biobetyg; 
var bildbetyg; 

function bBio() { 
    var bio = document.getElementById("bio"); 
    var biobe = bio.options[bio.selectedIndex].value; 
    if ((biobe === "-") || (biobe === "f")) { 
     biobetyg = 0; 
    } else if (biobe === "e") { 
     biobetyg = 10; 
    } else if (biobe === "d") { 
     biobetyg = 12.5; 
    } else if (biobe === "c") { 
     biobetyg = 15; 
    } else if (biobe === "b") { 
     biobetyg = 17.5; 
    } else if (biobe === "a") { 
     biobetyg = 20; 
    } 
} 

function bBild() { 
    var bild = document.getElementById("bild"); 
    var bildbe = bild.options[bild.selectedIndex].value; 
    if ((bildbe === "-") || (bildbe === "f")) { 
     bildbetyg = 0; 
    } else if (bildbe === "e") { 
     bildbetyg = 10; 
    } else if (bildbe === "d") { 
     bildbetyg = 12.5; 
    } else if (bildbe === "c") { 
     bildbetyg = 15; 
    } else if (bildbe === "b") { 
     bildbetyg = 17.5; 
    } else if (bildbe === "a") { 
     bildbetyg = 20; 
    } 
} 
var merit = bildbetyg + biobetyg; 

function GetSelectedItem() { 
    var strSel = "The Value is: " + merit + " and text is: "; 
    alert(strSel); 
} 

HTML：

<form> 
<h1>Bild</h1> 
<h2>Välj ditt betyg i bild:</h2> 
<select id="bild" onchange="bBild()"> 
    <option class="f" value="-">-</option> 
    <option class="f" value="f">F</option> 
    <option class="go" value="e" selected>E</option> 
    <option class="go" value="d">D</option> 
    <option class="go" value="c">C</option> 
    <option class="go" value="b">B</option> 
    <option class="go" value="a">A</option> 
</select> 
<select id="bio" onchange="bBio()"> 
    <option class="f" value="-">-</option> 
    <option class="f" value="f">F</option> 
    <option class="go" value="e" selected>E</option> 
    <option class="go" value="d">D</option> 
    <option class="go" value="c">C</option> 
    <option class="go" value="b">B</option> 
    <option class="go" value="a">A</option> 
</select> 
<input type="button" value="Press to Confirm" onClick="GetSelectedItem();"> 
</form> 

Answer 1

的問題是，這條線：

var merit = bildbetyg + biobetyg; 

設置任一這兩個函數之前變量 「好處」 中運行。它不會因爲其他兩個變量而自動重新計算。

移動「GetSelectedItem」函數中的代碼行，應該會更好。

您還需要初始化這兩個變量，以便如果在值更改之前單擊該按鈕，它仍然有效。事實上，你可以讓「GetSelectedItem」函數在計算總和之前簡單地調用兩個函數本身。

Answer 2

由於尖指出，我建議改變你的HTML：

<form> 
<h1>Bild</h1> 
<h2>Välj ditt betyg i bild:</h2> 
<select id="bild" onchange="bBild()"> 
    <option class="f" value="0">-</option> 
    <option class="f" value="0">F</option> 
    <option class="go" value="10" selected>E</option> 
    <option class="go" value="12.5">D</option> 
    <option class="go" value="15">C</option> 
    <option class="go" value="17.5">B</option> 
    <option class="go" value="20">A</option> 
</select> 
<select id="bio" onchange="bBio()"> 
    <option class="f" value="0">-</option> 
    <option class="f" value="0">F</option> 
    <option class="go" value="10" selected>E</option> 
    <option class="go" value="12.5">D</option> 
    <option class="go" value="15">C</option> 
    <option class="go" value="17.5">B</option> 
    <option class="go" value="20">A</option> 
</select> 
<input type="button" value="Press to Confirm" onClick="GetSelectedItem();"> 
</form> 

因此可以避開if S的需要（甚至使用switch()這將是一個更好的選擇，然後你可以改變你的JavaScript來（在parseFloat()部件，以避免治療的值作爲字符串，因爲這隻會連接而不是相加的數字）：

function bBio() 
{ 
    var bio = document.getElementById("bio"); 
    var biobetyg = parseFloat(bio.options[bio.selectedIndex].value); 
    return biobetyg; 
    } 

function bBild() 
{ 
var bild = document.getElementById("bild"); 
    var bildbetyg = parseFloat(bild.options[bild.selectedIndex].value); 
    return bildbetyg; 

} 

function GetSelectedItem() 
{ 
    var merit = bBio() + bBild(); 
    var strSel = "The Value is: " + merit + " and text is: "; 
    alert(strSel); 
} 

這大大降低了您的JS代碼，我認爲它更REA dable ......（除了實際工作

WORKING DEMO