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.

Ali Elkhateeb · Accepted Answer · 2019-05-21T02:10:29.343

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>

Is it possible to show the Feedback value without the calculate function? So that the Feedback will change automatically whenever the Total is changed? Thank you! — Mark Lester, May 16 '19 at 21:39
@MarkLester sorry for the late response, I added it to my answer, it's quite straight forward. — Ali Elkhateeb, May 21 '19 at 02:10
No problem at all. Thank you very much! However, it only works if I manually enter something on the Total field. How do I do it if the Total field is readonly as it get its result based on other fields on my form? I pasted the other javascript above I am using to get the value of Total automatically. — Mark Lester, May 21 '19 at 23:17
[This answer](https://stackoverflow.com/a/30110477/7021694) should help you do the job — Ali Elkhateeb, May 23 '19 at 05:36

score 2 · Answer 2 · answered May 16 '19 at 03:40

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;

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

2 Answers2