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>      

Answer 2

我实际上已经设法解决了这个问题，只需将脚本放在body标签的底部而不是头部（请注意：以前的位置）即可。