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

正如 Pointy 指出的，我建议将您的 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>

因此您可以避免使用ifs（甚至使用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 代码，我认为它更具可读性......（除了实际工作之外

WORKING DEMO

Answer 2

问题在于这一行：

var merit = bildbetyg + biobetyg;

在这两个函数中的任何一个运行之前设置变量“merit”。它不会因为其他两个变量发生变化而自动重新计算。

将这行代码移到“GetSelectedItem”函数中，事情应该会更好。

您还需要初始化这两个变量，以便如果在值更改之前单击按钮，它仍然可以工作。事实上，您可以让“GetSelectedItem”函数在计算总和之前简单地调用这两个函数本身。