Javascript function for populating a field based on user input in another field
This involves javascript in an HTML form. The problem I am having is populating a field in the same form based on user input of another field. WHen the user inputs a letter grade (Either A, B, or C) I am trying to get the percentage field to update to either 100 or 75 depending on the letter grade (A & B = 100, C=75). Below is what I haved tried so far, it doesn't seem to work correctly.
function PercentResult(grade)
{
if (grade.equalsIgnoreCase("A"))
{
return 100;
}
if (grade.equalsIgnoreCase("B"))
return 100;
if (grade.equalsIgnoreCase("C"))
return 75;
return 0;
开发者_JAVA百科}
There's no "equalsIgnoreCase" in Javascript; you may be confused by something from the entirely different language Java.
I'd just use a lookup:
function percentResult(grade) {
var grds = { 'A': 100, 'B': 100, 'C': 75 };
return grds[grade.toUpperCase()];
}
(There are ways to define the lookup that'd be a little more efficient but that's just an illustration.)
edit — googling around I did find a couple of sample implementations of doing "equalsIgnoreCase" for Javascript, but they're mostly simple wrappers around a comparison of upper- or lower-cased values. In this case there's no real need for it anyway.
The simplest way to do it is with a constrained set -- combo box to input box
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grades</title>
</head>
<body>
<form>
<table>
<tr>
<td>Combo Box</td>
<td>
<select id="combo1" name="combo1" onchange="input1.value = combo1.value">
<option value="100">A</option>
<option value="75">B</option>
<option value="50">C</option>
<option value="25">D</option>
<option value="0"">E</option>
</select>
</td>
</tr>
<tr>
<td>Input Box</td>
<td>
<input type="text" name="input1" id="input1"/>
</td>
</tr>
</table>
</form>
</body>
</html>
beyond that, or if you really require event handlers, you should code them as such. Here's a little example that does what you want:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grades</title>
<script type="text/javascript">
function eventHandler() {
var target = document.getElementById('input1');
var value = document.getElementById('input2').value;
value = value.trim().toUpperCase();
if( value == "A" ) {
target.value = "100%";
}
else if( value == "A" ) {
target.value = "100%";
}
else if( value == "B" ) {
target.value = "75%";
}
else if( value == "C" ) {
target.value = "50%";
}
else if( value == "D" ) {
target.value = "25%";
}
else if( value == "E" ) {
target.value = "0%";
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Combo Box</td>
<td><input type="text" name="input2" id="input2"
onblur="eventHandler()" onchange="eventHandler" value="A" /></td>
</tr>
<tr>
<td>Input Box</td>
<td><input type="text" name="input1" id="input1" /></td>
</tr>
</table>
</form>
</body>
</html>
Some of this stuff can be browser dependent pretty quick, so be sure check the js api document for the browser you're targeting.
加载中,请稍侯......
精彩评论