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>

我试图在JavaScript中使用其他if / else语句，但是它没有使用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>

@ Snel23指出，还有很多JavaScript错误

如果要删除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;

如何使用Javascript根据文本框输入显示不同的输出？

2 个答案: