javascript - 在页面加载时运行脚本

Question

我使用以下代码在用户输入数字时运行计算。

   <form action="index.php" method="post" autocomplete="off" data-abide>
   <input type="text" id="rate" name="rate">
   <input type="text" name="supplier_cost" class="value-right" pattern="\d*" value="<?php echo $supplier_cost; ?>" id="decimal" required>
   <input type="text" name="sterling" id="sterling" class="value-right" disabled>
   <button type="submit" class="button tiny ebc-theme" name="save"><i class="fa fa-floppy-o" aria-hidden="true"></i> SAVE</button>
   </form>

$(document).ready(function(){

        var supplier_id = $('#supplier').val().split(",");
        var period = "<?php echo $period; ?>";
        $.ajax({
            url: "fetch_rate.php",
            method: "POST",
            data:{supplierID:supplier_id[1], periodID:period},
            dataType:"text",
            success:function(data)
            {
                $('#rate').val(data);
            }
        });

});

   $(document).ready(SterlingCalc); 
   document.getElementById('decimal').addEventListener("keyup", SterlingCalc);

   var rate = document.getElementById('rate');
   var sup_cost = document.getElementById('decimal');

   function SterlingCalc(){

      document.getElementById('sterling').value = (sup_cost.value / rate.value).toFixed(2) || 0;

   }

如果“rate”和“decimal”字段都已加载(例如，值由数据库填充)，如何添加代码以便在页面加载时运行计算？

谢谢

约翰

Answer 1

试试这个:

$(document).ready(function() {
    SterlingCalc();
    document.getElementById('decimal').addEventListener("keyup", function(){SterlingCalc()});
});

function SterlingCalc(){
    var rate = document.getElementById('rate');
    var sup_cost = document.getElementById('decimal');
    document.getElementById('sterling').value = (sup_cost.value / rate.value).toFixed(2) || 0;
}

推理:使用 $(document).ready(function(){ XXX }) 您基本上在加载文档时执行代码 (XXX)。因此，如果页面加载，则键绑定(bind)将设置为“十进制”。