無法弄清楚我的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代碼中有什麼問題

回答

相關問題