How to display different output based on a text box input using Javascript?

Question

I am creating a grading system with a perfect score of 100. The total is automatically calculated depending the score provided and it is read only. Now, I want to show another text box a short remarks based on the total without the submit button. For example, if the grade is 90 and below, the remarks should automatically be set to 'Very Good' and if less than or equal to 80, the remarks will be "Good".

 function findTotal(){ var arr = document.getElementsByName('qty'); var tot=0; for(var i=0;i<arr.length;i++){ if(parseInt(arr[i].value)) tot += parseInt(arr[i].value); } document.getElementById('total').value = tot; } function calculate() { var feedback = document.getElementById("total").value; var greeting; if (feedback >= 90) { greeting = "OUTSTANDING"; } else if (feedback >= 80) { greeting = "VERY GOOD"; } else if (feedback >= 70) { greeting = "GOOD"; } else { greeting = "Needs Improvement"; } document.getElementById("feedback").value = greeting; }

 <div class="column3 tworow" style="background-color:#bbb;" align="center"> <table id="t01"> <tr> <td>SCORE: <input type="text" name="total" id="total" style="text-align:center;font-size:20px" onkeyup="calculate()" readonly></td> </tr> <tr> <td>FEEDBACK: <input type="text" name="feedback" id="feedback" style="text-align:center;font-size:20px" readonly></td> </tr> </table> </div>

I tried to use different if/else statement with JavaScript but it is not picking up the elseif function.

Answer 1

Your code needed a lot of cleaning, there were for example 2 <th> nested tags I don't know why, here is a working flexible example, just insert the number and press calculate

 function calculate() { var feedback = document.getElementById("total").value; var greeting; if (feedback >= 90) { greeting = "OUTSTANDING"; } else if (feedback >= 80) { greeting = "VERY GOOD"; } else if (feedback >= 70) { greeting = "GOOD"; } else { greeting = "Needs Improvement"; } document.getElementById("feedback").value = greeting; } 

 <table class="column3 tworow" style="background-color:#bbb;" align="center"> <tr> <th>TOTAL: <input type="text" name="total" id="total" style="text-align:center;font-size:20px"></th> </tr> <tr> <th>FEEDBACK: <input type="text" name="feedback" id="feedback" style="text-align:center;font-size:20px" readonly></th> </th> </tr> </table> <br> <button onclick="calculate()">Calculate</button> 

Also there were a lot of javascript errors, as noted by @Snel23

If you want to remove the Calculate button and make the feedback show whenever you insert something in the input field, just do this:

• Remove the <button> tag
• Add your <input onkeyup="calculate()"> to the <input> tag

Here is a snippet for that:

 function calculate() { var feedback = document.getElementById("total").value; var greeting; if (feedback >= 90) { greeting = "OUTSTANDING"; } else if (feedback >= 80) { greeting = "VERY GOOD"; } else if (feedback >= 70) { greeting = "GOOD"; } else { greeting = "Needs Improvement"; } document.getElementById("feedback").value = greeting; } 

 <table class="column3 tworow" style="background-color:#bbb;" align="center"> <tr> <th>TOTAL: <input type="text" name="total" id="total" style="text-align:center;font-size:20px" onkeyup="calculate()"></th> </tr> <tr> <th>FEEDBACK: <input type="text" name="feedback" id="feedback" style="text-align:center;font-size:20px" readonly></th> </th> </tr> </table> 

Answer 2

First of all, in your if else statements, you started by comparing feedback but changed to time . Secondly, you were trying to insert html into an element that didn't exist, rather than set the value on <input id="feedback"> Finally, you were trying to set that value to text which is a variable that doesn't exist.

The below JS code should fix your issues:

var feedback = document.getElementById("total").value;
if (feedback >= 90) {
  greeting = "OUTSTANDING";
} else if (feedback >=80) {
  greeting = "VERY GOOD";
} else if (feedback >=70) {
  greeting = "GOOD";
} else {
  greeting = "Needs Improvement";
} 
document.getElementById("feedback").value = greeting;

Answer 3

I've a question here. If I want to input text in score & depending on that text, below field will show specific text? Is it possible?