Question

我正在尝试获取更改后输入到年龄输入字段中的值的总和。然后，我需要根据受过训练的学生总数来验证年龄总和。如果受训的学生总数与学生年龄的总和不符，我想抛出一个错误。我正在用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()
    });
});

Answer 1

您的HTML有一些错误：

您的<input>元素需要添加class="age"才能被$(".age:input").each()函数识别。
第二个name元素中的<input>缺少右引号（"）。
在()事件中进行calcage调用后，您缺少括号（oninput）。但是，由于您使用的是$(".age").change()函数来调用calcage()函数，因此也不必同时调用oninput事件来调用calcage()函数。此外，每次输入发生更改时，都会调用oninput事件，而无需等待所有更改完成。这意味着，如果学生输入的年龄为“ 30”，则calcage函数将被调用两次：首先输入“ 3”，然后再次输入“ 0”。由于这不是您想要的，因此可以从输入中删除那些事件处理程序。离开$(".age").change()，因为这只会在学生完成输入后才会触发。一旦您的<input>元素添加了class="age"，它就会起作用。
只有当<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>

添加输入字段并使用javascript验证总和

1 个答案: