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

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

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>

Advertisement

Answer