logo标签列表

JavaScript：将文本框中输入的数字转换为相应的字母等级

javascriptphphtmlif-statement
3
到目前为止，我已经写出了以下代码，但无法显示结果。 我希望能够输入一个数字，例如“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>
你想把结果显示在页面上还是输入框#letter元素中？ - karthick
你有一个额外的闭合括号。 - Jeremy
@karthick 我想让字母等级显示在只读的输入文本框中。 - sam
https://jsfiddle.net/wo3ywgpm/ - Jared Farrish
3个回答
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>

0

document.write()在指定位置输出文本。你想要做的是将其替换为document.getElementById('score').value = SOME_VAL，其中SOME_VAL是你的字母等级。

0
你需要获取输入元素并在其中设置值，而不是在页面中。document.write的目标是整个HTML而不是元素。为了在输入元素中显示结果，请使用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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接