Добавить поля ввода и проверить сумму по сумме, используя JavaScript - PullRequest
Новая
       38

Добавить поля ввода и проверить сумму по сумме, используя JavaScript

0 голосов
/ 09 ноября 2018

Я пытаюсь получить сумму значений, введенных в поля ввода возраста при изменении.Затем мне нужно сравнить сумму возрастов с общим количеством обученных студентов.Если общее количество обученных студентов не соответствует сумме возрастов студентов, я хочу выдать ошибку.Я кодирую в C #.

Вот мой HTML-код: 

<h4>Training</h4>
<b>Total number of students in training:</b> <input type="number" name="Total Number students trained" min="0"><span style="color: #f00">
<h5>Ages of Students </h5>
    <table>
        <tr>
            <td><label for="age 18" class="float-left"> &#060;18:</label> <input type="number" min="0" max="500" name="age 18" oninput="calcage"> </td>
            <td><label for="age 24" class="float-left">18-24:</label> <input type="number" min="0" name="age 24 oninput="calcage"> </td>
            <td><label for="age 34" class="float-left">25-34:</label> <input type="number"min="0" name="age 34" oninput="calcage"> </td>
            <td><label for="age 44" class="float-left">35-44:</label> <input type="number" min="0" name="age 44" oninput="calcage"> </td>
        </tr>
</table>

Вот мой JavaScript: 

function calcage() {
    var score = 0;
    $(".age:input").each(function () {
        score += parseInt(this.value);
    });
    $("input[name=Score]").val(score)
}

$().ready(function () {
    $(".age").change(function () {
        calcage()
    });
});

1 Ответ

0 голосов
/ 09 ноября 2018

Ваш HTML содержит несколько ошибок:

  1. К вашим <input> элементам необходимо добавить class="age", чтобы они распознавались функцией $(".age:input").each().
  2. В name вашего второго <input> элемента отсутствует закрывающая двойная кавычка (").
  3. Вы пропускаете скобки (()) после вызовов calcage в ваших oninput событиях. Однако, поскольку вы используете функцию $(".age").change() для вызова функции calcage(), необязательно также, чтобы событие oninput вызывало функцию calcage(). Кроме того, событие oninput вызывается каждый раз, когда ввод изменяется, не дожидаясь завершения всех изменений. Это означает, что если ученик ввел возраст «30», функция calcage будет вызываться дважды: сначала для «3», а затем снова для «0». Поскольку это не то, что вам нужно, эти обработчики событий можно удалить из входных данных. Оставьте $(".age").change(), так как это сработает только после того, как студент закончит печатать. Он будет работать, как только к вашим <input> элементам добавится class="age".
  4. Элементы <label> для атрибута будут работать только при наличии элемента <input> с соответствующим значением id.

Попробуйте следующий исправленный HTML: 

<h4>Training</h4>
<b>Total number of students in training:</b> <input type="number" name="Total Number students trained" min="0"><span style="color: #f00">
<h5>Ages of Students </h5>
    <table>
        <tr>
            <td><label for="age 18" class="float-left"> &#060;18:</label> <input class="age" type="number" min="0" max="500" name="age 18"> </td>
            <td><label for="age 24" class="float-left">18-24:</label> <input class="age" type="number" min="0" name="age 24"> </td>
            <td><label for="age 34" class="float-left">25-34:</label> <input class="age" type="number" min="0" name="age 34"> </td>
            <td><label for="age 44" class="float-left">35-44:</label> <input class="age" type="number" min="0" name="age 44"> </td>
        </tr>
</table>
...