如何使用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>

我尝试在 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> 

还存在很多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插入不存在的元素中，而不是在<input id="feedback">上设置value 。最后，您试图将该值设置为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;

Answer 3

我在这里有一个问题。 如果我想根据该文本在分数中输入文本，下面的字段将显示特定文本？ 是否可以？