到目前为止，这就是我所拥有的，但我无法让它显示结果。我希望能够输入一个数字，例如“75”，单击按钮，然后在底部的文本框中输入“C”等其他数字。 到目前为止，我的代码如下所示:
当我单击“单击此处”时，我不希望答案是单独的，我希望它显示在只读文本框中。
<!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>
最佳答案
一些建议和问题。
- 在比较之前使用
parseInt将其转换为数字。 var score = parseInt(document.getElementById("score").value, 10); - 使用
document.write是一种不好的做法 - 使用 javascript 绑定(bind)事件处理程序并避免使用内联事件处理程序以提高可读性。
// 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>关于Javascript:将文本框数字条目转换为相应的字母等级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44295946/