ラジオボタンの数値に応じて結果を与えるフォームを作成する際のエラー

Question

私は比較的新しいコーディングをしていて、簡単に始めたいと思っています。私はユーザーがラジオボタンを使って選択を行うフォームを作成しており、選択の数値に基づいて結果を出します。すべてのコードは1つのページにあり、私はhtmlとjavascriptを使用しています。どんな助けもありがとう。私がコードを実行すると、 "totalSev"は "totalValue"の値が何であっても "S4"にデフォルト設定されます。ここで

は私のhtmlです：

<div id="customerImpact"> 
<h3>Question 1</h3> 
<input type="radio" name="impact" value="5"/> 
<label for="impact1">Answer 1</label><br> 
<input type="radio" name="impact" value="4"/> 
<label for="impact2">Answer 2</label><br> 
<input type="radio" name="impact" value="3"/> 
<label for="impact3">Answer 3</label><br> 
<input type="radio" name="impact" value="2"/> 
<label for="impact4">Answer 4</label><br> 
<input type="radio" name="impact" value="1"/> 
<label for="impact5">Answer 5</label> 
</div> 
<div id="customerRanking"> 
<h3>Question 2</h3> 
<input type="radio" name="ranking" value="4"/> 
<label for="rankingl">Answer 1</label><br> 
<input type="radio" name="ranking" value="3"/> 
<label for="ranking2">Answer 2</label><br> 
<input type="radio" name="ranking" value="3"/> 
<label for="ranking3">Answer 3</label><br> 
<input type="radio" name="ranking" value="2"/> 
<label for="ranking4">Answer 4</label><br> 
<input type="radio" name="ranking" value="1"/> 
<label for="ranking4">Answer 5</label><br> 
</div> 
<div id="endUsersAffected"> 
<h3>Question 3</h3> 
<input type="radio" name="endusers" value="3"/> 
<label for="endusers1">Answer 1</label><br> 
<input type="radio" name="endusers" value="2"/> 
<label for="endusers2">Answer 2</label><br> 
<input type="radio" name="endusers" value="1"/> 
<label for="endusers3">Answer 3</label><br> 
</div> 
<div id="customerUrgency"> 
<h3>Question 4</h3> 
<input type="radio" name="urgency" value="3"/> 
<label for="urgency1">Answer 1</label><br> 
<input type="radio" name="urgency" value="2"/> 
<label for="urgency2">Answer 2</label><br> 
<input type="radio" name="urgency" value="1"/> 
<label for="urgency3">Answer 3</label><br> 
</div> 
<br> 
<button onclick="getValue()">Calculate</button> 
<p id="message"></p> 
<b><p id="severity"></p></b> 

のjavascript：あなたはdocument.querySelectAllをしたいDIV、INPUT、SPANなど

を：

var totalValue = ""; 
var totalSev = ""; 
var totalValueNum = ""; 
function impactNum() { 
var impact = document.getElementsByName('impact'); 
var impactBracket; 
var impactNumerical; 

for (var i = 0; i < impact.length; i++) { 
    if (impact[i].checked) { 
     impactBracket = impact[i].value; 
    } 
} 

if (impactBracket == "5") { 
    impactNumerical = 5; 
} else if (impactBracket == "4") { 
    impactNumerical = 4; 
} else if (impactBracket == "3") { 
    impactNumerical = 3; 
} else if (impactBracket == "2") { 
    impactNumerical = 2; 
} else if (impactBracket == "1") { 
    impactNumerical = 1; 
} else { 
    impactNumerical = 0; 
} 
return impactNumerical; 
} 

function rankingNum() { 
var ranking = document.getElementsByName('ranking'); 
var rankingValue; 
var rankingNumerical; 
for (var i = 0; i < ranking.length; i++) { 
    if (ranking[i].checked) { 
     rankingValue = ranking[i].value; 
    } 
} 
if (rankingValue == "4") { 
    rankingNumerical = 4; 
} else if (rankingValue == "3") { 
    rankingNumerical = 3; 
} else if (rankingValue == "3") { 
    rankingNumerical = 3; 
} else if (rankingValue == "2") { 
    rankingNumerical = 2; 
} else if (rankingValue == "1") { 
    rankingNumerical = 1; 
} else { 
    rankingNumerical = 0; 
} 
return rankingNumerical; 

} 

function endusersNum() { 
var endusers = document.getElementsByName('endusers'); 
var enduserAnswer; 
var enduserNumerical; 

for (var i = 0; i < endusers.length; i++) { 
    if (endusers[i].checked) { 
     enduserAnswer = endusers[i].value; 

    } 
} 
if (enduserAnswer == "3") { 
    enduserNumerical = 3; 
} else if (enduserAnswer == "2") { 
    enduserNumerical = 2; 
} else if (enduserAnswer == "1") { 
    enduserNumerical = 1; 
} else { 
    enduserNumerical = 0; 
} 

return enduserNumerical; 

} 


function urgencyNum() { 
var urgency = document.getElementsByName('urgency'); 
var urgencyAnswer; 
var urgencyNumerical; 
for (var i = 0; i < urgency.length; i++) { 
    if (urgency[i].checked) { 
     urgencyAnswer = urgency[i].value; 
    } 
} 

if (urgencyAnswer == "3") { 
    urgencyNumerical = 3; 
} else if (urgencyAnswer == "2") { 
    urgencyNumerical = 2; 
} else if (urgencyAnswer == "1") { 
    urgencyNumerical = 1; 
} else { 
    urgencyNumerical = 0; 
} 

return urgencyNumerical; 

} 

function getValue() { 

var a = impactNum(); 
var b = rankingNum(); 
var c = endusersNum(); 
var d = urgencyNum(); 


totalValue = a + b + c + d; 

console.log("Impact: " + impactNum()); 
console.log("Ranking: " + rankingNum()); 
console.log("End Users: " + endusersNum()); 
console.log("Urgency: " + urgencyNum()); 
console.log("Total: " + totalValue); 


console.log(typeof totalValue); 

document.getElementById('message').innerHTML = "Points: " + totalValue; 
document.getElementById('severity').innerHTML = "Severity: " + totalSev; 

} 

if (totalValue == 15) { 
totalSev = "S1"; 
} else if (totalValue == 14) { 
totalSev = "S1"; 
} else if (totalValue == 13) { 
totalSev = "S1"; 
} else if (totalValue == 12) { 
totalSev = "S2"; 
} else if (totalValue == 11) { 
totalSev = "S2"; 
} else if (totalValue == 10) { 
totalSev = "S3"; 
} else if (totalValue == 9) { 
totalSev = "S3"; 
} else { 
totalSev = "S4" 
} 

Answer 1

document.getElementsByName('impact'); 

getElementsByNameは、HTMLのタグ名を指し、

document.querySelectAll('input[name=impact]') 

さらに、入力の値は常に文字列を返します。

impactBracket = impact[i].value; 

変換

// note the + coercing the string to a number 
impactBracket = +impact[i].value;