Калькулятор счетчиков 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 с (или даже с помощью 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, и я думаю, что это более реа dable ... (к тому же на самом деле работает

WORKING DEMO