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".

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

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

<div class="column3 tworow" style="background-color:#bbb;" align="center">
  <tr>
    <th>TOTAL: <input type="text" value="100" name="total" id="total" style="text-align:center;font-size:20px" readonly></th>
  </tr><br />
  <tr>
    <th>
      <th>FEEDBACK: <input type="text" value="OUSTSTANDING" name="total" id="feedback" style="text-align:center;font-size:20px" readonly></th>
    </th>
  </tr>
</div>