Clever Geek Handbook

Javascript: convert textbox input to appropriate letter class

So far, this is what I have, but I cannot get it to show the result. I want to be able to enter a number like "75", click the button and then the bottom text box to say "C" etc. With other numbers. So far, my code looks like this:

When I click CLICK HERE I don't want one answer, I want it to appear in the readonly textbox.

<!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>
+3


source to share


3 answers


Several suggestions and problems.

  • Use parseInt

    to convert it to a number before comparing. var score = parseInt (document.getElementById ("score"). value, 10);
  • Bad usage practice document.write

  • Bind event handlers using javascript and avoid inline event handlers for readability.


// 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>
Run codeHide result


+1


source


document.write()

displays the text at this location. What you want to do is replace the ones with document.getElementById('score').value = SOME_VAL

where SOME_VAL

is your writing level.



0


source


You have to get an input element and set a value in it. Not on the page. document.write target is all html, not element. To show the result in an input element, use document.getElementById ("element") and set the value of that element with .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>
Run codeHide result


0


source






More articles:


All Articles