Javascript：将文本框编号条目转换为相应的字母等级

Question

到目前为止，这是我所拥有的，但我不能让它显示结果。 我希望能够输入诸如“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>

Answer 1

几个建议和问题。

在比较之前使用parseInt将其转换为数字。 var score = parseInt（document.getElementById（“score”）。value，10）;
使用document.write是一种不好的做法
使用javascript绑定事件处理程序并避免使用内联事件处理程序以实现可读性。

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

Answer 2

document.write()输出该点的文本。 你想要做的是用document.getElementById('score').value = SOME_VAL替换那些document.getElementById('score').value = SOME_VAL ，其中SOME_VAL是你的字母等级。

Answer 3

您必须获取input元素并在其中设置值。 不在页面中。 document.write的目标是整个html而不是元素。 为了在input元素中显示结果，请使用document.getElementById（“element”）并使用.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>

Javascript：将文本框编号条目转换为相应的字母等级

问题描述

3 个解决方案

解决方案1
1 2017-05-31 23:06:57

解决方案2
0 2017-05-31 23:05:56

解决方案3
0 2017-05-31 23:07:56

Javascript：将文本框编号条目转换为相应的字母等级

问题描述

3 个解决方案

解决方案1 1 2017-05-31 23:06:57

解决方案2 0 2017-05-31 23:05:56

解决方案3 0 2017-05-31 23:07:56

解决方案1
1 2017-05-31 23:06:57

解决方案2
0 2017-05-31 23:05:56

解决方案3
0 2017-05-31 23:07:56