javascript - javascript 事件处理程序不工作（按钮点击

问题描述

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

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

无论我如何尝试修复它，它似乎都不起作用。正如您在 js 代码中看到的那样，我已经尝试了许多基于我在这里找到的东西来修复它的方法。

最初<script src ="sales.js">HTML 文件中的是放在头上的，但我在这里的一些页面中读到，将它放在那里可以使它在其他所有内容之前加载，并将它放在 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();
};

标签： javascripthtmladdeventlistener

javascript - javascript 事件处理程序不工作（按钮点击 - 谷歌说空）

问题描述

解决方案

推荐阅读