Функция Javascript для заполнения поля на основе пользовательского ввода в другом поле - PullRequest
0 голосов
/ 08 ноября 2010

Это включает в себя JavaScript в форме HTML.У меня проблема с заполнением поля в той же форме, основанной на вводе пользователем другого поля.Когда пользователь вводит буквенную оценку (A, B или C), я пытаюсь обновить процентное поле до 100 или 75 в зависимости от буквенной оценки (A & B = 100, C = 75).Ниже то, что я пробовал до сих пор, похоже, не работает правильно.

function PercentResult(grade)
{
  if (grade.equalsIgnoreCase("A"))
  {
    return 100;
  }
  if (grade.equalsIgnoreCase("B"))
    return 100;
  if (grade.equalsIgnoreCase("C"))
    return 75;
  return 0;
}

Ответы [ 2 ]

2 голосов
/ 08 ноября 2010

В Javascript нет "equalsIgnoreCase"; Вас может смущать что-то из совершенно другого языка Java.

Я бы просто использовал поиск:

function percentResult(grade) {
  var grds = { 'A': 100, 'B': 100, 'C': 75 };
  return grds[grade.toUpperCase()];
}

(Есть способы определить поиск, который был бы немного более эффективным, но это только иллюстрация.)

edit & mdash; Поискав в поисках, я нашел пару примеров реализации «equalsIgnoreCase» для Javascript, но они в основном простые обертки для сравнения значений в верхнем или нижнем регистре. В этом случае в этом нет особой необходимости.

0 голосов
/ 08 ноября 2010

Самый простой способ сделать это с помощью комбинированного поля с ограниченным набором для ввода

<!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>

и далее, или, если вам действительно требуются обработчики событий, вы должны кодировать их как таковые.Вот небольшой пример, который делает то, что вы хотите:

<!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>

Некоторые из этих вещей могут довольно быстро зависеть от браузера, поэтому обязательно проверьте документ js api для браузера, на который вы нацеливаетесь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...