Как отобразить различный вывод на основе ввода текстового поля с использованием Javascript?

Question

Я создаю систему оценок с идеальным счетом 100. Общая сумма автоматически рассчитывается в зависимости от предоставленной оценки и доступна только для чтения.Теперь я хочу показать другое текстовое поле коротких замечаний на основе общего количества без кнопки отправки.Например, если оценка составляет 90 и ниже, отметки должны автоматически устанавливаться на «Очень хорошо», а если они меньше или равны 80, отметки будут «Хорошо».

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>

Я пытался использовать другой оператор if / else с JavaScript, но он не получает функцию elseif.

Answer 1

Ваш код нуждался в большой очистке, было, например, 2 <th> вложенных тега. Я не знаю почему, вот рабочий гибкий пример, просто введите число и нажмите 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>

Также было много ошибок JavaScript, как заметил @ Snel23

Если вы хотите удалить кнопку Calculate и сделатьотображение обратной связи всякий раз, когда вы вставляете что-либо в поле ввода, просто сделайте следующее:

• Удалите тег <button>
• Добавьте ваш <input onkeyup="calculate()"> к тегу <input>

Вот фрагмент для этого:

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

Прежде всего, в своих if else утверждениях вы начали со сравнения feedback, но изменили на time. Во-вторых, вы пытались вставить html в несуществующий элемент, вместо того, чтобы установить value на <input id="feedback"> Наконец, вы пытались установить это значение на text, которое является переменной, которая не существует.

Приведенный ниже код JS должен исправить ваши проблемы:

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;