Javascript：将文本框数字条目转换为相应的字母等级答案

【问题标题】：Javascript: Convert a text box number entry into a corresponding letter gradeJavascript：将文本框数字条目转换为相应的字母等级
【发布时间】：2017-05-31 22:59:50
【问题描述】：

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

【问题讨论】：

你想在页面的什么地方或 input#letter 元素中显示结果？
你有一个额外的右大括号。
@karthick 我希望字母等级显示在只读的输入文本框中。
jsfiddle.net/wo3ywgpm

标签： javascript php html if-statement

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您必须获取输入元素并在其中设置值。不在页面中。 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>

【讨论】：