Javascript: Convert a text box number entry into a corresponding letter grade
Question
So far this is what I have but I can't get it to display the result. I want to be able to enter a number such as "75", click the button, and then the bottom textbox to say "C" and so on with other numbers. So far my code looks like this:
When I click "CLICK HERE" I don't want the answer to be alone, I want it to show up in the readonly textbox.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var score = document.getElementById("score").value;
if (90 <= score)
{document.write ("A");}
else if (80 <= score && score < 90)
{document.write ("B");}
else if (70 <= score && score < 80)
{document.write ("C");}
else if (60 <= score && score < 70)
{document.write ("D");}
else
{document.write ("E");}
}
}
</script>
</head>
<body>
Grade % <input type="number" id="score" value=""><br>
<p><button onclick="myFunction()">CLICK HERE</button></p>
Letter Grade <input type="text" id="letter" readonly><br><br>
</body>
</html>
3 answers
solution1
1 2017-05-31 23:06:57
Couple of suggestions and issues.
- Use
parseIntto convert it to a number before comparison. var score = parseInt(document.getElementById("score").value, 10); - It is a bad practice to use
document.write - Bind the event handlers using javascript and avoid inline event handlers for readability purposes.
// Select the element and bind the click event to the button document.querySelector('#btn').addEventListener('click', function() { // convert to integer before comparision var score = parseInt(document.getElementById("score").value, 10); var letterInput = document.getElementById("letter"); var letter = "E"; if (90 <= score) { letter = "A"; } else if (80 <= score && score < 90) { letter = "B"; } else if (70 <= score && score < 80) { letter = "C"; } else if (60 <= score && score < 70) { letter = "D"; } letterInput.value = letter; });
Grade % <input type="number" id="score" value=""> <br> <p> <button id="btn">CLICK HERE</button> </p> Letter Grade <input type="text" id="letter" readonly> <br> <br>
solution2
0 2017-05-31 23:05:56
document.write() outputs text in that spot. What you want to do is replace those with document.getElementById('score').value = SOME_VAL where SOME_VAL is your letter grade.
solution3
0 2017-05-31 23:07:56
You have to get the input element and set the value in it. Not in the page. document.write's target is the whole html not the element. In order to show the result in the input element use document.getElementById("element") and set the value of that element by using .value()
function myFunction() { var score = document.getElementById("score").value; if (90 <= score) { document.getElementById("letter").value = 'A'; } else if (80 <= score && score < 90) { document.getElementById("letter").value = 'B'; } else if (70 <= score && score < 80) { document.getElementById("letter").value = 'C'; } else if (60 <= score && score < 70) { document.getElementById("letter").value = 'D'; } else { document.getElementById("letter").value = 'E'; } }
Grade % <input type="number" id="score" value=""><br> <p><button onclick="myFunction()">CLICK HERE</button></p> Letter Grade <input type="text" id="letter" readonly><br><br>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.