JavaScript的形式和在計算分數

Question

我有一些鍛鍊我的JavaScript類。

我必須完成的任務是創建一個簡單的表單，用戶可以爲每個問題選擇1個選項，一旦他們選擇了選定的選項，表單將顯示他們的分數。

<form id="form" name="form" method="post" action=""> 
<fieldset id="controls"> 
    <p>Do you like chocolate? 
    <label>Yes a lot </label> 
    <input type="radio" name="choco" id="alot" value="Alot" checked="true"> 
    <label>Not that much </label> 
    <input type="radio" name="choco" id="notMuch" value="NotMuch"> 
    <label>No, but still I don't mind eating it sometimes </label> 
    <input type="radio" name="choco" id="noSometimes" value="NoSometimes"> 
    <label>No, I hate it </label> 
    <input type="radio" name="choco" id="hate" value="Hate"> 
    </p> 
    <p>Do you prefer chocolate cake or carrot cake? 
    <label>chocolate </label> 
    <input type="radio" name="cake" id="chocolate" value="Chocolate" checked="true"> 
    <label>Carrot </label> 
    <input type="radio" name="cake" id="carrot" value="Carrot"> 
    <label>Both</label> 
    <input type="radio" name="cake" id="both" value="Both"> 
    <label>None </label> 
    <input type="radio" name="cake" id="none" value="None"> 
    </p> 

    <p> 
    <input type="submit" name="Calculate" id="calculate" value="Calculate" /> 
    </p> 

所以我想我會創造一個非常短的形式，要求用戶2的問題，找出人有多喜歡或不喜歡巧克力。

而對於計算我做了如下編碼：

var numericalValues = new Array(); 
numericalValues["Alot"]= 4; 
numericalValues["NotMuch"]= 2; 
numericalValues["NoSometimes"]= 3; 
numericalValues["Hate"]= 0; 
numericalValues["Chocolate"]= 4; 
numericalValues["Carrot"]= 0; 
numericalValues["Both"]= 2; 
numericalValues["None"]= 0; 


function getScoreChoco(){ 
    var scoreChoco = 0; 
    var form = document.forms["form"]; 
    var choco = form.elements["choco"]; 
    for(var i=0; i<choco.length; i++){ 
     if(choco[i].checked){ 
      totalScore = numericalValues[choco[i].value]; 
      break; 
     } 
    } 
    return scoreChoco; 
} 

function getScoreCake(){ 
    var scoreCake = 0; 
    var form = document.forms["form"]; 
    var cake = form.elements["diabetic1"]; 
    for(var i=0; i<cake.length; i++){ 
     if(cake[i].checked){ 
      totalScore = numericalValues[cake[i].value]; 
      break; 
     } 
    } 
    return scoreCake; 
} 

function getTotal(){ 
    var totalScore = getScoreCake() + getScoreChoco() 

    document.getElementById('calculate').innerHTML = 
            "Your total score is: "+totalScore; 
} 

和代碼不工作，幫助請:(

Here's my jsfiddle

Answer 1

我做了一些改動：

1. 我假設你想在JavaScript中caluculate所以我刪除從表單提交按鈕與ID爲「calulate」
2. 然後我必將onclick事件爲布頓（「計算」），以getTotal功能
在功能getScoreChoco和getScoreCake
3. 我用你的變量返回的分數becouse您使用totalscore財產簡單的按鈕更改window對象對返回結果

我粘貼JavaScript代碼中定義的變量不是我becouse有問題的jsfiddle

var numericalValues = new Array(); 
numericalValues["Alot"]= 4; 
numericalValues["NotMuch"]= 2; 
numericalValues["NoSometimes"]= 3; 
numericalValues["Hate"]= 0; 
numericalValues["Chocolate"]= 4; 
numericalValues["Carrot"]= 0; 
numericalValues["Both"]= 2; 
numericalValues["None"]= 0; 


function getScoreChoco() 
{ 
var scoreChoco = 0; 
var form = document.forms["form"]; 
var choco = form.elements["choco"]; 
for(var i=0; i<choco.length; i++) 
{ 
    if(choco[i].checked) 
    { 
    scoreChoco = numericalValues[choco[i].value]; 
    break; 
    } 

} 
return scoreChoco; 
}; 

function getScoreCake() 
{ 
var scoreCake = 0; 
var form = document.forms["form"]; 
var cake = form.elements["cake"]; 

for(var i=0; i<cake.length; i++) 
{ 
    if(cake[i].checked) 
    { 
    scoreCake = numericalValues[cake[i].value]; 
    break; 
    } 

} 
return scoreCake; 
}; 


function getTotal() 
{ 

var totalScore = getScoreCake() + getScoreChoco(); 


document.getElementById('result').innerHTML = 
           "Your total score is: "+totalScore; 

} 

document.getElementById('calculate').onclick=getTotal; 

編輯而HTML代碼

<form id="form" name="form"> 
<fieldset id="controls"> 
<p>Do you like chocolate? 
<label>Yes a lot </label> 
<input type="radio" name="choco" id="alot" value="Alot" checked="true"> 

<label>Not that much </label> 
<input type="radio" name="choco" id="notMuch" value="NotMuch"> 
<label>No, but still I don't mind eating it sometimes </label> 
<input type="radio" name="choco" id="noSometimes" value="NoSometimes"> 

<label>No, I hate it </label> 
<input type="radio" name="choco" id="hate" value="Hate"> 
</p> 
<p>Do you prefer chocolate cake or carrot cake? 
<label>chocolate </label> 
<input type="radio" name="cake" id="chocolate" value="Chocolate" checked="true"> 

<label>Carrot </label> 
<input type="radio" name="cake" id="carrot" value="Carrot"> 

<label>Both</label> 
<input type="radio" name="cake" id="both" value="Both"> 

<label>None </label> 
<input type="radio" name="cake" id="none" value="None"> 
</p> 

<p> 
    <input type="button" name="Calculate" id="calculate" value="Calculate" /> 
</p> 
    <p id="result"></p> 

    </form>