无法弄清楚我的Javascript代码中有什么问题

时间：2017-07-28 19:08:19

标签： javascript html css

无法弄清楚为什么我的Javascript代码无法运行以显示字母等级并更改背景颜色。我是新来的，但我认为我做对了......有什么想法吗？

  1. 将数字等级写入表格的左下角单元格。
  2. 表格右下角的相关字母等级。 （对于该问题，使用：A> = 90> B> = 80> C> = 70> D> = 60> F）
  3. 如果等级通过，则字母等级单元格的背景颜色变为绿色。如果等级失败，字母等级单元格的背景颜色应变为红色。

    4. <!DOCTYPE html>
<html lang="en">

<head>
  <title>Lab11aKL.html</title>
  <meta charset="utf-8">

  <style>

  </style>
  <script>
    function addNumbers() {
      var t1 = document.getElementById("t1");
      var t2 = document.getElementById("t2");
      var t3 = document.getElementById("t3");
      var t4 = document.getElementById("t4");
      var t5 = document.getElementById("t5");
      var t6 = document.getElementById("t6");

      answer.value = parseFloat(t1.value * .20) + parseFloat(t2.value * .20) +
        parseFloat(t3.value * .30) + parseFloat(t4.value * .125) +
        parseFloat(t5.value * .125) + parseFloat(t6.value * .05);
    }

    function gradeLetter() {
      var t1 = document.getElementById("t1");
      var t2 = document.getElementById("t2");
      var t3 = document.getElementById("t3");
      var t4 = document.getElementById("t4");
      var t5 = document.getElementById("t5");
      var t6 = document.getElementById("t6");

      var ct1 = parseFloat(t1.value * .20);
      var ct2 = parseFloat(t2.value * .20);
      var ct3 = parseFloat(t3.value * .30)
      var ct4 = parseFloat(t4.value * .125);
      var ct5 = parseFloat(t4.value * .125);
      var ct6 = parseFloat(t6.value * .05);

      if (answer >= 90 > ) {
        answergrade = 'A';
        document.getElementById("answergrade").style.backgroundColor =
          'green';
      } else if (answer >= 80 > ) {
        answergrade = 'B';
        document.getElementById("answergrade").style.backgroundColor =
          'green';
      } else if (answer >= 70 > ) {
        answergrade = 'C';
        document.getElementById("answergrade").style.backgroundColor =
          'green';
      } else if (answer >= 60 > ) {
        answergrade = 'D';
        document.getElementById("answergrade").style.backgroundColor =
          'green';
      } else(answer < 60) {
        answergrade = 'F';
        document.getElementById("answergrade").style.backgroundColor =
          'red';
      }
    }
  </script>


</head>

<body>

  <form name="tform" id="tform">
    <table>
      <tr>
        <th></th>
        <th>Score</th>
      </tr>
      <tr>
        <td>Test 1</td>
        <td><input type="text" name="t1" id="t1" /></td>
      </tr>
      <tr>
        <td>Test 2</td>
        <td><input type="text" name="t2" id="t2" /></td>
      </tr>
      <td>Final Exam</td>
      <td><input type="text" name="t3" id="t3" /></td>
      </tr>
      <td>Labs</td>
      <td><input type="text" name="t4" id="t4" /></td>
      </tr>
      <td>Project</td>
      <td><input type="text" name="t5" id="t5" /></td>
      </tr>
      <td>Quizzes</td>
      <td><input type="text" name="t6" id="t6" /></td>
      </tr>
      <tr>

        <th colspan="2">
          <input type="button" name="b1" id="b1" value="Calculate Grade" onclick="addNumbers(); gradeLetter()" />
        </th>
      </tr>
      <tr>
        <td><input type="text" name="answer" id="answer" /></td>
        <td><input type="text" name="answergrade" id="answergrade" /></td>
      </tr>

    </table>

  </form>
</body>

</html>

4 个答案:

答案 0 :(得分：0)

您的问题是缺少值。看看if / else子句

else if (answer >=70 >{??})

javascript中没有x＆gt; a＆gt; y类型的比较。

答案 1 :(得分：0)

这里有几个问题。

  1. 您没有在answer函数中为addNumbers()定义的变量。
  2. 您在answer.value中设置addNumbers()，但在answer函数的所有条件中与gradeLetter()进行比较。
  3. t1到t6没有HTML格式的值。
    4. 在answergrade中计算的
  4. gradeLetter()未被写入该HTML元素
  5. 您的条件未正确定义
  6. 您不能else (condition){//condition is true execute this stuff}，而只是else{//execute this code automatically}。在第一个if语句使用else if (condition){//condition is true execute this stuff}
    7. 后出现问题时

    请参阅下面的代码，它可以让您指出正确的方向。

    <!DOCTYPE html>
<html lang="en">
<head>
<title>Lab11aKL.html</title>
<meta charset="utf-8">

<style>
</style>
<script>
var answer;

function addNumbers()
{
    var t1 = document.getElementById("t1");
    var t2 = document.getElementById("t2");
    var t3 = document.getElementById("t3");
    var t4 = document.getElementById("t4");
    var t5 = document.getElementById("t5");
    var t6 = document.getElementById("t6");

    answer = parseFloat(t1.value * .20) + parseFloat(t2.value * .20) + 
    parseFloat(t3.value * .30) + parseFloat(t4.value * .125) + 
    parseFloat(t5.value * .125) + parseFloat(t6.value * .05);
}

function gradeLetter()
{
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var t3 = document.getElementById("t3");
var t4 = document.getElementById("t4");
var t5 = document.getElementById("t5");
var t6 = document.getElementById("t6");

var ct1 = parseFloat(t1.value * .20);
var ct2 = parseFloat(t2.value * .20);
var ct3 = parseFloat(t3.value * .30) 
var ct4 = parseFloat(t4.value * .125);
var ct5 = parseFloat(t4.value * .125);
var ct6 = parseFloat(t6.value * .05);

        if (answer >=90)
            {
            answergrade = 'A';
            document.getElementById ("answergrade").style.backgroundColor = 
'green';
            }
        else if (answer >=80)
            {
            answergrade = 'B';
            document.getElementById ("answergrade").style.backgroundColor = 
'green';
            }
        else if (answer >=70)
            {
            answergrade = 'C';
            document.getElementById ("answergrade").style.backgroundColor = 
'green';
            }
        else if (answer >=60)
            {
            answergrade = 'D';
            document.getElementById ("answergrade").style.backgroundColor = 
'green';
            }
        else if (answer <60)
            {
            answergrade = 'F';
            document.getElementById ("answergrade").style.backgroundColor =         
'red';
            }
var answerElem = document.getElementById('answergrade')
answerElem.innerText = answergrade;
}
</script>


</head>
<body>

<form name="tform" id="tform">
<table>
    <tr>
        <th></th>
        <th>Score</th>
    </tr>
    <tr>
        <td>Test 1</td>
        <td><input type="text" name="t1" id="t1"/>10</td>
    </tr>
    <tr>
        <td>Test 2</td>
        <td><input type="text" name="t2" id="t2"/>50</td>
    </tr>
        <td>Final Exam</td>
        <td><input type="text" name="t3" id="t3"/>100</td>
    </tr>
        <td>Labs</td>
        <td><input type="text" name="t4" id="t4"/>90</td>
    </tr>
        <td>Project</td>
        <td><input type="text" name="t5" id="t5"/>70</td>
    </tr>
        <td>Quizzes</td>
        <td><input type="text" name="t6" id="t6"/>85</td>
    </tr>
    <tr>

        <th colspan="2">
        <input type="button" name="b1" id="b1"
        value="Calculate Grade"
        onclick="addNumbers(); gradeLetter()"/>
        </th>
    </tr>
    <tr>
        <td><input type="text" name="answer" id="answer"/></td>
        <td><input type="text" name="answergrade" id="answergrade"/></td>
    </tr>

</table>

</form>
</body>
</html>

答案 2 :(得分：0)

有几个问题。如果您使用浏览器的开发人员控制台进行故障排除，其中一些清晰可见。如果您要编写javascript程序，那么必须学习如何使用控制台。

以下是一个工作片段。运行它以使其工作。

我在下面的代码中评论了各种问题（就在固定代码之前）。

＆＃13;
＆＃13; 
public static final String DEFAULT_TARGET_ENCODING = "ISO8859-1";
＆＃13; 
function addNumbers() {
  var t1 = document.getElementById( "t1" );
  var t2 = document.getElementById( "t2" );
  var t3 = document.getElementById( "t3" );
  var t4 = document.getElementById( "t4" );
  var t5 = document.getElementById( "t5" );
  var t6 = document.getElementById( "t6" );
  var answer = document.getElementById('answer');

  answer.value = parseFloat( t1.value * .20 ) + parseFloat( t2.value * .20 ) +
    parseFloat( t3.value * .30 ) + parseFloat( t4.value * .125 ) +
    parseFloat( t5.value * .125 ) + parseFloat( t6.value * .05 );
}

function gradeLetter() {
  // you weren't getting the value for "answer"
  // the + casts this to a number, so the comparisons work properly
  var answer = +document.getElementById('answer').value;
  
  var t1 = document.getElementById( "t1" );
  var t2 = document.getElementById( "t2" );
  var t3 = document.getElementById( "t3" );
  var t4 = document.getElementById( "t4" );
  var t5 = document.getElementById( "t5" );
  var t6 = document.getElementById( "t6" );

  var ct1 = parseFloat( t1.value * .20 );
  var ct2 = parseFloat( t2.value * .20 );
  var ct3 = parseFloat( t3.value * .30 )
  var ct4 = parseFloat( t4.value * .125 );
  var ct5 = parseFloat( t4.value * .125 );
  var ct6 = parseFloat( t6.value * .05 );

  // This is incorrect and causes a syntax error
  // if ( answer >= 90 > ) {
  if ( answer >= 90 ) {
    answergrade                                                    = 'A';
    document.getElementById( "answergrade" ).style.backgroundColor =
      'green';
  }
  else if ( answer >= 80 ) {
    answergrade                                                    = 'B';
    document.getElementById( "answergrade" ).style.backgroundColor =
      'green';
  }
  else if ( answer >= 70 ) {
    answergrade                                                    = 'C';
    document.getElementById( "answergrade" ).style.backgroundColor =
      'green';
  }
  else if ( answer >= 60 ) {
    answergrade                                                    = 'D';
    document.getElementById( "answergrade" ).style.backgroundColor =
      'green';
  }
  else if (answer < 60)
  {
    answergrade                                                    = 'F';
    document.getElementById( "answergrade" ).style.backgroundColor =
      'red';
  }
}
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：-2)

关闭你是否以及其他条件：

if (answer >=90 >){
        answergrade = 'A';
        document.getElementById ("answergrade").style.backgroundColor = 
        'green';
}

应该是

 if (answer >=90){
         answergrade = 'A';
         document.getElementById ("answergrade").style.backgroundColor = ` 
         'green';
 }

if else条件也需要关闭

if (answer >=80 >){
        answergrade = 'B';
        document.getElementById ("answergrade").style.backgroundColor = 
        'green';
 }

应该是

if (answer >=80 && answer < 90){
       answergrade = 'B';
       document.getElementById ("answergrade").style.backgroundColor = 
       'green';
 }
相关问题
最新问题