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

-3

无法弄清楚为什么我的Javascript代码不能运行以显示字母等级并更改背景颜色。我是这个新手，但是我认为我是对的......任何想法？无法弄清楚我的Javascript代码中有什么问题

将数字等级写入表格的左下角单元格。
并在表格右下方的单元格中关联的字母等级。（对于这个问题，使用：A> = 90> B> = 80> C> = 70> D> = 60> F）
如果等级正在通过字母等级单元格的背景颜色变为绿色。如果评分失败，字母等级单元格的背景颜色应变为红色。

<!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>

来源

2017-07-28 alex4

我没有看到结果的变量的任何地方。 –

什么是没有关于它的工作？发生了什么，它与你试图达到的结果有什么不同？此外，您的标题应该是问题的简要总结 - 目前您的标题可以应用于任何有史以来的JavaScript问题*。 – Santi

了解如何提出问题：1.你期望它做什么或不做什么？ 2.你检查了浏览器的控制台是否有错误？如果是这样，有没有？ 3.设置一个我们可以运行的jsFiddle或代码片段，所以我们不必重新创建这种情况。 –

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

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

JavaScript中没有x> a> y类型的比较。

来源

2017-07-28 19:14:57

but..but ..but ..应该有。将需要更少的代码:) – jdmdevdotnet

将来，请考虑拒绝对离题问题的回答。每元：[*“如果问题是（...）所有SE网站的主题：不要回答”*]（https://meta.stackexchange.com/questions/133552/should-i-回答-题外话 - 问题）。此外，你冒着接受积分的风险，因为礼仪规定[在主题问题上的答案被降低]（https://meta.stackexchange.com/questions/194963/should-one-downvote-answers-to-off -topic-问题）。它鼓励糟糕的提问习惯。 – Santi

@Santi我不确定我是否在追随。为什么这是一个题外话题？ –

-2

关闭了你，如果，如果其他条件：

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

应该

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

而且如果其他条件，需要关闭以及

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

应该

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

来源

2017-07-28 19:18:17

这些被称为条件，而不是循环 –

'if（answer> = 90>）...'，'if（answer> = 80>）...''？ – Santi

@Our_Benefactors对术语不准确性进行投票？ –

这里有几个问题。

您没有在addNumbers()函数中为answer定义的变量。
您正在设置answer.value的addNumbers()，但随后在gradeLetter()函数的所有条件中与answer进行比较。
t1到t6在HTML中没有值。
answergrade在gradeLetter()正在计算没有被写入到HTML元素
你的条件语句不正确
定义你不能有else (condition){//condition is true execute this stuff}，它只是else{//execute this code automatically}。当第一个if声明后有条件时使用else if (condition){//condition is true execute this stuff}

请参阅下面的代码，应该让您指出正确的方向。

<!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>

来源

2017-07-28 19:18:22

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

下面是一个工作片段。运行它看看它的工作。

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

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'; 
 
    } 
 
}

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

 
<style> 
 
</style> 
 

 

 
</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>

来源

2017-07-28 19:27:03

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

回答

相关问题