Автоматический расчет числового поля ввода

Question

Im создает три числовых поля ввода с автоматическим отображением дисплея сбоку. У меня тяжелое время, так как я не знаю, как использовать ajax. Возможно, кто-то может помочь мне реализовать JavaScript.

Шаг 1: У меня есть текстовое поле со значением по умолчанию 100.

Шаг 2: У меня есть 3 числового inputs.If я вход 20 в первом поле, значение по умолчанию будет deducted.If я ввод 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

Предполагая, что вы хотите ваниль JS, это будет выглядеть примерно так:

Добавить имя класса и идентификатор для яваскрипта селекторов в вашей HTML-разметки:

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

} 

Просто потому, что он короче, и мне нравится, как она выглядит!