Kann nicht herausfinden, was in meinem Javascript-Code falsch ist

-3

Ich kann nicht herausfinden, warum mein Javascript-Code nicht laufen wird, um einen Buchstabengrad zu zeigen und die Hintergrundfarbe zu ändern. Ich bin neu dabei, dachte aber, ich hätte es richtig gemacht ... irgendwelche Ideen?Kann nicht herausfinden, was in meinem Javascript-Code falsch ist

Schreibt den numerischen Wert in die untere linke Zelle der Tabelle.
Und die zugehörige Buchstabenklasse in der unteren rechten Zelle der Tabelle. (Für dieses Problem verwenden Sie: A> = 90> B> = 80> C> = 70> D> = 60> F)
Wenn die Note überschritten wird, ändert sich die Hintergrundfarbe der Buchstabenzelle in grün. Wenn die Note fehlschlägt, sollte die Hintergrundfarbe der Zelle mit dem Buchstabengrad rot werden.

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

Quelle

2017-07-28 alex4

Ich sehe nicht, eine Variable für Antwort an jedem Ort. –

Was funktioniert nicht? Was passiert und wie unterscheidet es sich von den Ergebnissen, die Sie erreichen möchten? Darüber hinaus sollte Ihr Titel eine kurze Zusammenfassung des Problems sein - derzeit könnte Ihr Titel für eine beliebige JavaScript-Frage gelten *. – Santi

Erfahren Sie, wie Sie eine Frage stellen: 1. Was macht es oder nicht, was Sie erwarten? 2. Haben Sie in der Konsole Ihres Browsers nach Fehlern gesucht? Wenn ja, gibt es welche? 3. Richten Sie ein jsFiddle oder ein Code-Snippet ein, das wir ausführen können, damit wir die Situation nicht genau neu erstellen müssen. –

Ihre Ausgabe Werte fehlt. Werfen Sie einen Blick auf if/else-Klauseln

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

Es gibt keine x> a> y Art des Vergleichs in Javascript.

Quelle

2017-07-28 19:14:57

but..but..aber .. sollte es sein. würde weniger Code erfordern :) – jdmdevdotnet

In Zukunft sollten Sie in Betracht ziehen, Antworten auf off-topic Fragen zurückzuhalten. Per meta: [* "Wenn die Frage (...) nicht auf allen SE-Sites steht: Beantworte die Frage nicht" *] (https://meta.stackexchange.com/questions/133552/should-i- Antwort-off-topic-Fragen). Darüber hinaus besteht das Risiko, Downvotes zu erhalten, da die Etikette vorschreibt, dass [Antworten zu Off-Topic-Fragen downvoted werden] (https://meta.stackexchange.com/questions/194963/should-one-downvote-answers-to-off) -Themen-Fragen). Es fördert schlechte Fragen-Fragen Gewohnheiten. – Santi

@Santi Ich bin mir nicht sicher, ob ich folge. Warum ist es eine off-topic Frage? –

-2

Close out Sie, ob und wenn sonst Bedingungen:

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

sein sollte

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

Und wenn sonst Bedingungen auch

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

sein sollte geschlossen sein müssen,

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

Quelle

2017-07-28 19:18:17

Diese heißen conditionals, nicht loops –

' if (answer> = 90>) ... ',' if (answer> = 80>) ... '? – Santi

@Our_Benefactors Down Abstimmung über Begriff Ungenauigkeit? –

Hier gibt es mehrere Probleme.

Sie haben noch eine Variable für answer definiert, die Sie sich beziehen in der addNumbers() Funktion.
Sie setzen answer.value in addNumbers(), aber dann im Vergleich zu answer in allen Ihre Bedingungen in der gradeLetter() Funktion.
t1 bis t6 haben keinen Wert in HTML.
answergrade in gradeLetter() berechnet wird, nicht auf dieses HTML-Element geschrieben
Ihr conditionals nicht definiert ist richtig
Sie nicht else (condition){//condition is true execute this stuff} haben können, ist es nur else{//execute this code automatically}. Wenn es eine Bedingung nach der ersten if Anweisung else if (condition){//condition is true execute this stuff}

Bitte beachten Sie den folgenden Code, der Sie in der richtigen Richtung bekommen sollte.

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

Quelle

2017-07-28 19:18:22

Es gibt mehrere Probleme. Einige davon sind deutlich sichtbar, wenn Sie die Fehlerbehebung in der Entwicklerkonsole eines Browsers verwenden. Wenn Sie Javascript programmieren, ist es ein Muss, zu lernen, wie man die Konsole benutzt.

Unten ist ein funktionierendes Snippet.Führen Sie es aus, damit es funktioniert.

Ich habe in dem Code unten die Vielzahl von Problemen (kurz vor dem festen Code) kommentiert.

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>

Quelle

2017-07-28 19:27:03

Kann nicht herausfinden, was in meinem Javascript-Code falsch ist

Antwort

Verwandte Themen