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

我做了一些改动：

我假设您想要在javascript中进行计算，因此我从表单中删除提交按钮并使用id为“calulate”的简单按钮进行更改
然后我将onon（'calculate'）的onclick事件绑定到getTotal函数
在函数getScoreChoco和getScoreCake中我用你的变量返回得分，因为你使用的是窗口对象的totalscore属性而不是为返回结果定义的变量

我粘贴javascript代码因为我有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>

JavaScript表单和计算分数

1 个答案: