使用分数在javascript中分配奖励

时间:2015-05-17 21:09:55

标签: javascript

这是我为这个项目提出的问题的最后一部分。我想根据总分(三名评委的平均分)“分配”一个奖项。因此,如果得分为0-30,则为金,30.1-60为高金,最后为60.1-90,为铂金。当按下获得分数按钮时,我希望显示总分(它确实如此)和分配给的奖励(金,高金,白金)。如何分配和展示该奖项?我不知道如何编码。我有if语句的基础,但我不确定这是否有效。需要帮助找出如何找到奖项是什么,并让它显示奖项。像计算和显示总分。这是代码:

<!DOCTYPE html>
<html>
<body>
<p align="right"> Dance Number:  <input type="text"size="3"></p>
<h1><ins>Judge 1</ins></h1>
<form>
<p> Technique:  <input class="jd1" id="txt1" type="number"size="3"   min="0" max="35">     /35</p>
<p> Choreography:  <input id="txt2" class="jd1" type="number"size="3"    min="0" max="15"> /15</p>
<p> Performance: <input  id="txt3" class="jd1" type="number"size="3" min="0" max="25">   /25</p>
<p> Precision:  <input id="txt4" class="jd1" type="number"size="3" min="0" max="15">  /15</p>
<p> Total Points: <input id="txt5"type="text"size="3">  /90</p>
<p> Comments</p>
<textarea name="commentsOne" cols="50" rows="5">
</textarea>
</br>
</form>

<h1><ins>Judge 2</ins></h1>
<form>
<p> Technique:  <input id="txt6" type="number" class="jd2" size="3" min="0"  max="35"> /35</p>
<p> Choreography:  <input id="txt7" type="number" class="jd2" size="3" min="0" max="15"> /15</p>
<p> Performance: <input id="txt8" type="number" class="jd2" size="3" min="0" max="25"> /25</p>
<p> Precision:  <input  id="txt9" class="jd2" type="number" size="3" min="0" max="15"> /15</p>
<p> Total Points: <input  id="txt10"type="number"size="3">  /90</p>
<p> Comments</p>
<textarea name="commentsOne" cols="50" rows="5">
</textarea>
</form>

<h1><ins>Judge 3</ins></h1>
<form>
<p> Technique:  <input  id="txt11" class="jd3" type="number"size="3"  min="0" max="35">  /35</p>
<p> Choreography:  <input id="txt12" type="number" class="jd3" size="3" min="0" max="15">  /15</p>
<p> Performance: <input  id="txt13" class="jd3" type="number" size="3" min="0" max="25">  /25</p>
<p> Precision:  <input id="txt14" type="number" size="3" class="jd3" min="0" max="15"> /15</p>
<p> Total Points: <input id="txt15" type="number"size="3">  /90</p>
<p> Comments</p>
<textarea name="commentsOne" cols="50" rows="5">
</textarea>
</form>

<input type="button"  onclick="sum()" onclick="award()" value="Get   Score">
<p> Overall Score:<span id="avg"></span></p>
<p> Award Assigned:<span id = "award"></span></p>
</body>
<script>

  function getSum(className) {
  var result = 0;
  var classGroup = document.getElementsByClassName(className);

  for(var i =0; i < classGroup.length; (i = i + 1))
  {
    result += parseInt((classGroup[i].value || 0), 10);
  }

  return result;

}

function sum() {

  var result1 = getSum('jd1');
  var result2 = getSum('jd2');
  var result3 = getSum('jd3');

  console.log('sum' + result1 + '' + result2 + '' + result3);

  document.getElementById('txt5').value = result1;
  document.getElementById('txt10').value = result2;
  document.getElementById('txt15').value = result3;


  document.getElementById('avg').innerHTML = (result1 + result2 +   result3)/3;
}

function award(){

document.getElementById('avg').value = x;

if( x = 0, x++, x < 30.1)
    {

    }

if( x = 0, x++, x < 60.1)
    {

    }

if( x = 0, x++, x < 91)
    {

    }
}

</script>
</html>

4 个答案:

答案 0 :(得分:1)

如果你将if语句更改为更像这样的语句,它应该有效:

if(x < 30.1)
{

} 
else if(x < 60.1)
{

}
else if(x < 91)
{

}

代码if( x = 0, x++, x < 30.1)只会导致错误。

答案 1 :(得分:1)

您似乎错误地将if声明误认为loopsif内的整个内容应该返回truefalse(即条件)。

已编辑:

我更改了sum()的最后几行,你打电话给award()通过了分数;

function sum() {
    //your code
    var score = (result1 + result2 + result3) / 3;
    document.getElementById('avg').innerHTML = score;

    award(score);
}

然后你的奖励功能:

function award(x) {
    var aw = document.getElementById('award');

    if (x > 0 && x < 30.1)
        aw.innerHTML = 'Gold';
    else if (x < 60.1)
        aw.innerHTML = 'High Gold';
    else if (x < 91)
        aw.innerHTML = 'Platinum';
}

jsfiddle DEMO

答案 2 :(得分:1)

var award = ['Gold','High Gold','Platinum'][ (( score - 0.1 ) / 30 ) | 0 ];

我只是好奇是否可以在一行代码中完成而没有所有那些if语句......答案是肯定的。上面的行返回0到91分的正确奖励。

这里有趣的部分是按位运算符“得分| 0”。这与正数的Math.floor()和负数的Math.ceil()类似。这就是在这种情况下计算数组索引所需要的。

好吧,我们都知道不要在生产代码中使用技巧,除非目标是让其他程序员讨厌你。不过,这很酷。

<强>更新

在回复评论时,请替换此行:

document.getElementById('avg').innerHTML = (result1 + result2 +   result3)/3;

这些行:

var score = (result1 + result2 + result3) / 3;
document.getElementById('avg').innerHTML = score;
document.getElementById('award').innerHTML = ['Gold','High Gold','Platinum'][ (( score - 0.1 ) / 30 ) | 0 ];

同样,我不鼓励在生产代码中使用这样的技巧 - 大声笑。

答案 3 :(得分:0)

正如其他人指出的那样,你错误地使用for循环语句。此外,您必须将元素的值分配给x,反之亦然。 你可以尝试:

    function award(){
   var x = document.getElementById('avg').value ;
    var awardname='';
    if(x < 30.1)
        {
           awardname='gold';
        }

    if(x < 60.1)
        {
           awardname='high gold';
        }

    if( x < 91)
        {
           awardname='platinum';
        }

    document.getElementById('award').value = awardname;
    }