页面加载时运行脚本

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）。 因此，如果页面加载，则将绑定设置为“十进制”。

Answer 2

您正在尝试将jquery与标准js混合使用，这不是最佳实践，使用jquery可以执行以下操作：

    $(document).ready(function () {

     let sterlingFunc = function (){

     let rate = $('#rate');
     let sup_cost = $('#decimal');
     let value = (sup_cost.value / rate.value).toFixed(2) || 0;
     $('#sterling').val(value);
     // maybe return value
     }

     $("#decimal").on("keyup", sterlingFunc());

     // to run when page is loaded 
     sterlingFunc();  

    });