javascript - onClick JavaScript 在第一次访问(页面访问)时不起作用

Question

我创建了一个 JavaScript 函数，当我们第一次访问网页时，该函数不起作用。只有刷新页面或第二次访问它才会起作用。

如何确保它即使在我们第一次访问该页面时也能正常工作？

这是代码:

<script type="text/javascript">
            
    /*--adding/subtracting no. of seats and price-- */

    function calculateSeat()
    {      
        var nums = [document.getElementById('number_seat0').value, document.getElementById('number_seat1').value,document.getElementById('number_seat2').value,document.getElementById('number_seat3').value,document.getElementById('number_seat4').value];
                
        var num = 0;
                
        for (i=0; i < nums.length; i++) {
            num += +nums[i];
        }
                          
        document.getElementById('total_seat').value = num;
        document.getElementById('total_amount').value = parseFloat(num * <?php echo $_SESSION['price'] ;?>).toFixed(2);
      };
</script>      

Answer 1

检查下面的示例

<script type="text/javascript">
    function calculateSeat() {

        // your php variables
        var phpPrice = parseInt('<?php echo $_SESSION['price'] ;?>');

        // shortcut
        var $byId = document.getElementById; //faster that querySelector

        // list of your DOM elements with ids
        var ids = ['number_seat0', 'number_seat1', 'number_seat2', 'number_seat3', 'number_seat4'];

        // function that will be used in [].reduce
        // to calculate your result
        function getSum(total, id) {
            return total + ( +$byId( id ).value );
        };

        // total number
        // Array.reduce docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
        var result = ids.reduce(getSum);

        $byId('total_seat').value = result;
        $byId('total_amount').value = (result * phpPrice).toFixed(2);
    }
</script>