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>

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

）

<强> WORKING DEMO

Answer 2

问题是这一行：

var merit = bildbetyg + biobetyg;

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

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

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

Javascript点计算器无法正常工作（HTML select / options + Javascript）

2 个答案: