Question

到目前为止，这是我所拥有的，但我无法显示结果。我希望能够输入诸如＆＃34; 75＆＃34;之类的数字，单击按钮，然后在底部文本框中输入＆＃34; C＆＃34;和其他数字一样。到目前为止，我的代码看起来像这样：

当我点击＆＃34;点击这里＆＃34;我不希望答案单独出现，我希望它出现在只读文本框中。

<!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（＆＃34; score＆＃34;）。value，10）;
使用document.write
使用javascript绑定事件处理程序并避免使用内联事件处理程序以实现可读性。

＆＃13;

// 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;
});

＆＃13;

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>

＆＃13;

Answer 2

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

Answer 3

您必须获取input元素并在其中设置值。不在页面中。 document.write的目标是整个html而不是元素。为了在input元素中显示结果，请使用document.getElementById（＆＃34; element＆＃34;）并使用.value（）

设置该元素的值

＆＃13;

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';
	}
}

＆＃13;

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>

＆＃13;

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

3 个答案: