函數在JavaScript內部無法正常執行

Question

我在JavaScript中有這個函數，它應該計算在php中選擇的產品的總價格。 當我加載我的頁面時，控制台記錄我的功能工作之外，但里面的那些沒有。 我的代碼中是否存在導致其無法執行的錯誤？

<?php
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
      ?>
      <tr>
          <td><?= htmlentities($row['id']); ?></td>
          <td><?= htmlentities($row['Article']); ?></td>
          <td><?= htmlentities($row['Prix']); ?></td>
          <td><?= htmlentities($row['PrixRetour']); ?></td>
          <td><?= htmlentities($row['QuantiteeMaximale']); ?></td>
          <td><?= htmlentities($row['Projet']); ?></td>
          <td><input data-price='<?= floatval($row['Prix']); ?>' data-max-quantity='<?= intval($row['QuantiteeMaximale']); ?>' type="number" name="quantity"></td>
      </tr>
      <?php
    }
    ?>
    </table>
    <p>Grand Total: $<span id='grandTotal'></span></p>
    <script>
        console.log("test1");
        function calTotal() {
            console.log("test2");
            const tableEl = document.getElementById('articles')
            const grandTotalEl = document.getElementById('grandTotal')
            const inputEls = tableEl.querySelectorAll('input[name=quantity]')
            const updateGrandTotal = (grandTotalEl, inputEls) => {
                grandTotalEl.innerText = inputEls.reduce((total, inputEl) => {
                    const maxQuantity = parseInt(inputEl.dataset.maxQuantity)

                    if(parseInt(inputEl.value) > maxQuantity) inputEl.value = maxQuantity
                    if(parseInt(inputEl.value) < 0) inputEl.value = 0

                    const price = parseFloat(inputEl.dataset.price)
                    const quantity = parseInt(inputEl.value)

                    console.log("hello");

                    if(isNaN(quantity)) return total

                    return total + (price * quantity)
                }, 0)
            }
            console.log("test3");

            quantityInputEls.forEach(el => el.addEventListener('keyup', () => updateGrandTotal(grandTotalEl, inputEls)))
        };
    </script>
    <?php
} else {
    echo "0 results";
}
$conn->close();
?>

Answer 1

嘗試用你的功能包裝

(function calTotal() { 
    //...contents
})();

這會將函數定義轉換為IIFE，並且您的事件偵聽器將被綁定。

JavaScript中的（function（）{}）（）構造是什么？

或者只是添加calTotal(); 就在</script>之前

並將這些行移動到事件處理程序中，或使它們可全局訪問：

const grandTotalEl = document.getElementById('grandTotal')
const inputEls = tableEl.querySelectorAll('input[name=quantity]')

---

好的，改變你的代碼如下：

<script> 
    function calTotal() {
        const updateGrandTotal = () => {
            const tableEl = document.getElementById('articles')
            const grandTotalEl = document.getElementById('grandTotal')
            const inputEls = tableEl.querySelectorAll('input[name=quantity]')
            grandTotalEl.innerText = inputEls.reduce((total, inputEl) => {
                const maxQuantity = parseInt(inputEl.dataset.maxQuantity)
                if(parseInt(inputEl.value) > maxQuantity) inputEl.value = maxQuantity
                else if(parseInt(inputEl.value) < 0) inputEl.value = 0

                const price = parseFloat(inputEl.dataset.price)
                const quantity = parseInt(inputEl.value)

                console.log("hello");

                if(isNaN(quantity)) return total

                return total + (price * quantity)
            }, 0)
        }

        quantityInputEls.forEach(el => el.addEventListener('keyup', () => updateGrandTotal(grandTotalEl, inputEls)))
    };
</script>

然后，您可以在開發人員工具窗口中對其進行調試，以查看哪些內容無效。

Answer 2

// Create javascript-only function for loaded DOM
function readyFired(callback) {
    document.readyState != 'complete' ? setTimeout('readyFired(' + callback + ')', 1) : callback();
}

// DOM is fully-loaded and ready to calculate the total
readyFired(function() {
    calTotal();
});