[英]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.我正在创建一个满分为 100 的评分系统。总分是根据提供的分数自动计算的,并且是只读的。 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".例如,如果成绩为 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>
I tried to use different if/else statement with JavaScript but it is not picking up the elseif
function.我尝试在 JavaScript 中使用不同的 if/else 语句,但它没有选择elseif
函数。
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
您的代码需要大量清理,例如有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>
Also there were a lot of javascript errors, as noted by @Snel23 还存在很多JavaScript错误,如@ 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: 如果要删除“ Calculate
按钮并在输入字段中插入任何内容时显示反馈,只需执行以下操作:
<button>
tag 删除<button>
标签 <input onkeyup="calculate()">
to the <input>
tag 将您的<input onkeyup="calculate()">
到<input>
标记中 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>
First of all, in your if else
statements, you started by comparing feedback
but changed to time
. 首先,在if else
语句中,您从比较feedback
开始,但更改为time
。 Secondly, you were trying to insert html into an element that didn't exist, rather than set the value
on <input id="feedback">
Finally, you were trying to set that value to text
which is a variable that doesn't exist. 其次,您试图将html插入不存在的元素中,而不是在<input id="feedback">
上设置value
。最后,您试图将该值设置为text
,这是一个不存在的变量存在。
The below JS code should fix your issues: 下面的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;
I've a question here.我在这里有一个问题。 If I want to input text in score & depending on that text, below field will show specific text?如果我想根据该文本在分数中输入文本,下面的字段将显示特定文本? Is it possible?是否可以?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.