Question

我创建了三个数字输入字段，旁边有自动显示计算。我很难做，因为我不知道如何使用ajax。也许有人可以帮我实现使用javascript。

第1步：我有一个默认值为100的文本字段。

步骤2：我有3个数字输入。如果我在第一个字段中输入20，将扣除默认值。如果我在第二个字段中输入30，则现在默认值为50.所以如果我输入50个第三个字段，现在默认值为零。

我如何在javascript中实现这一点？

  <label>Remaing Point:</label>
  <input type="text" name="point" value="100" disabled>

<br><br>
<div>
  <table>
    <tr> 
      <th></th>
      <th><label>Points</label></th>
    <tr> 
      <th><label>Gpa:</label></th>
      <th> <input type="number" name="point" min="1" max="100"></th>
      </tr>
    <tr> 
      <th><label>Age:</label></th>
      <th><input type="number" name="point" min="1" max="100"></th>
      </tr>
<tr> 
      <th><label>Needs:</label></th>
      <th><input type="number" name="point" min="1" max="100"></th>
  </tr>
  </table>
  
  
</div>

Answer 1

假设您想要vanilla JS，它看起来像这样：

在HTML标记中添加javascript选择器的classname和id：

 <label>Remaing Point:</label>
  <input type="text" name="point" value="100" id="remaining" disabled>

<br><br>
<div>
  <table>
    <tr> 
      <th></th>
      <th><label>Points</label></th>
    <tr> 
      <th><label>Gpa:</label></th>
      <th> <input type="number" name="point" class="point" min="1" max="100"></th>
      </tr>
    <tr> 
      <th><label>Age:</label></th>
      <th><input type="number" name="point" class="point" min="1" max="100"></th>
      </tr>
<tr> 
      <th><label>Needs:</label></th>
      <th><input type="number" name="point" class="point" min="1" max="100"></th>
  </tr>
  </table>

使用JavaScript，您可以在输入字段上绑定更改事件侦听器：

    var points = document.getElementsByClassName('point');
var remaining = document.getElementById('remaining');

for(var i = 0; i < points.length; i++) {
    points[i].addEventListener('change', function() {

        var inputPoints = getInputPoints();

        remaining.value = 100 - inputPoints;

    });
}

function getInputPoints() {

    var inputPoints = 0;

    for(var j = 0; j < points.length; j++) {

        var inputPoint = points[j].value || 0;

        inputPoints += parseInt(inputPoint);

    }

    return inputPoints;

}

Answer 2

我还不能添加评论，所以为了回应freginolds评论：

我会将函数重写为：

function getInputPoints() {

    var inputPoints = 0;

    for(var j = 0; j < points.length; j++) {

        inputPoints += parseInt(points[j].value || 0);

    }

    return inputPoints;

}

只是因为它更短，我喜欢它的样子！

数值三输入场的自动计算

2 个答案: