javascript 事件处理程序不起作用按钮点击 - 谷歌说为空

如何解决javascript 事件处理程序不起作用按钮点击 - 谷歌说为空

我在这里查看了许多类似问题的线程，但收效甚微 - 我无法弄清楚这里到底出了什么问题。谷歌声称我试图引用的元素为空

Uncaught TypeError: Cannot read property 'addEventListener' of null at sales.js:12

无论我如何尝试修复它，它似乎都不起作用。正如您在 js 代码中看到的那样，我已经根据我在此处找到的内容尝试了多种修复方法。

最初 HTML 文件中的 <script src ="sales.js"> 位于头部，但我在此处的一些页面中读到，将它放在那里可以使其在其他所有内容之前加载，并在 HTML 结束标记之前放下。

有什么建议吗？

HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8">
    <title>Sales Tax Calculator</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
    <h1>Sales Calculator</h1>
    <p>Complete the form and click "Calculate".</p>
    <fieldset>
        <legend>
            Item information
        </legend>
        <label for="item">Item:</label>
        <input type="text" id="item" ><br>

        <label for="price">Price:</label>
        <input type="text" id="price" ><br>

        <label for="discount">discount %:</label>
        <input type="text" id="discount" ><br>

        <label for="taxRate">Tax Rate:</label>
        <input type="text" id="taxRate" ><br>

        <label for="total">discount Price:</label>
        <input type="text" id="discountPrice" disabled ><br>

        <label for="salesTax">Sales Tax:</label>
        <input type="text" id="salesTax" disabled ><br>

        <label for="total">Total:</label>
        <input type="text" id="total" disabled ><br><br>

        <div id="buttons">
        <input type="button" id="calculate" value="Calculate" >
        <input type="button" id="clear" value="Clear" ><br></div>
    </fieldset>
    <pre>&copy; Fall 2020 Rob Honomichl - Dakota State University</pre>
</main>
</body>
<script src="sales.js"></script>
</html>

JS代码：

//"use strict"

var $ = function (id) {
    return document.getElementById(id); 
};

//window.addEventListener("DOMContentLoaded",() => {
    //$("#calculate").addEventListener("click",processEntries);
//});

window.addEventListener('DOMContentLoaded',function () {
    document.getElementById("#calculate").addEventListener("click",processEntries);
});

//window.onload = function(){
    //$("#calculate").addEventListener("click",processEntries);
//};

const processEntries = () => {
    //Gather User Input
    //var item = document.querySelector("#item").value;
    var price = parseFloat(document.querySelector("#price").value).toFixed(2);
    var discount = parseInt(document.querySelector("#discount").value);
    var taxRate = parseInt(document.querySelector("#taxRate").value);

    //Calculate discounted Price
    function discountPriceCalc(price,discount) {
        const disPrice = price * (discount/100);
        return disPrice.toFixed(2);
    }

    //Calculate Sales Tax
    function salesTaxCalc(discountPrice,taxRate) {
        const taxTotal = price * (taxRate/100);
        return taxTotal.toFixed(2);
    }

    //Calculate Total
    function totalCalc(discountPrice,salesTax) {
         return ((Number(discountPrice) + Number(salesTax).toFixed(2)));
    }

    //Calculate the disabled text Box values
    var discountPrice = discountPriceCalc(price,discount);
    var salesTax = salesTaxCalc(discountPrice,taxRate);
    var Total = totalCalc(discountPrice,salesTax);

    //Update Text Boxes
    document.getElementById("discountPrice").value = discountPrice;
    document.getElementById("salesTax").value = salesTax;
    document.getElementById("total").value = Total;

    //set focus to Item Box after
    document.getElementById("item").focus();
};

解决方法

您需要去掉 getElementById 调用中的 # 以正确定位元素。

window.addEventListener('DOMContentLoaded',function () {
    document.getElementById("calculate").addEventListener("click",processEntries);
});

javascript 事件处理程序不起作用按钮点击 - 谷歌说为空

如何解决javascript 事件处理程序不起作用按钮点击 - 谷歌说为空

解决方法

相关推荐