使用JavaScript自動填充計算值

Question

我已經兩天了，我正在改進我的代碼。這段代碼沒有問題，但這次我希望第三個字段或最後剩下的字段自動填入其餘的點。我試圖操縱，但它只會導致消極。當我多次更改值時，我無法計算確切的值。任何幫助非常感謝。請提前感謝您。

<div class="col-lg-12"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> Please enter the weighted measurements for the criteria in selecting the scholars :</div> 
     <div class="panel-body"> 
     <div class="col-lg-4 form-group"> 
      <label class="control-label"> 
      Total criteria : 
      </label> 
      {!! Form::text('point','100',['class'=>'form-control', 'id'=>'remaining','disabled']) !!} 
     </div> 
     <div> 
      <div class="col-lg-12"> 

      <div class="col-lg-4 form-group"> 
       <label class="control-label"> 
       Percent for age: 
       </label> 
       {!! Form::text('scholarship_points_one',null,['class'=>'form-control point','id'=>'f1','maxlength' => '3', 'min'=>'4', 'max'=>'100','placeholder'=>'Enter Your Rate 1 - 100']) !!} 
      </div> 

      <div class="col-lg-4 form-group"> 
       <label class="control-label"> 
       Percent for GPA: 
      </label> 
      {!! Form::text('scholarship_points_two',null,['class'=>'form-control point','id'=>'f2','maxlength' => '3', 'min'=>'4', 'max'=>'100','placeholder'=>'Enter Your Rate 1 - 100']) !!} 
      </div> 

      <div class="col-lg-4 form-group"> 
      <label class="control-label"> 
      Percent for location: 
      </label> 
      {!! Form::text('scholarship_points_three',null,['class'=>'form-control point','id'=>'f3','maxlength' => '3', 'min'=>'4', 'max'=>'100','placeholder'=>'Enter Your Rate 1 - 100']) !!} 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 

<script type="text/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++) { 
     if (!isNaN(points[j].value) && points[j].value != "") { inputPoints += parseInt(points[j].value);} 
    } 
    return inputPoints; 
    } 
</script> 

Answer 1

添加類input-fields-to-sum到您的源輸入字段，然後

<script> 
$(document).ready(function() { 
    calculateTotals(); 

    $(".input-fields-to-sum").on('input', function() { 
     calculateTotals(); 
    }); 
}); 

function calculateTotals() { 
    // walk on input fields with class, calculate sum and put it in total field 
    // input can contain invalid numbers, handle errors when parsing 
} 

function parseNumber(str, defaultValue) { 
    if (str !== undefined && str.length) { 
     var parsed = parseFloat(str.replace(',','.').replace(/\s/g,'').replace(/\&nbsp\;/g,'')); 
     if (isNaN(parsed)) return defaultValue; 
     return parsed; 
    } 
    return defaultValue; 
} 
</script>