Question

如何修复未捕获的类型错误：无法读取 null 的属性（读取“addEventListener”）

2023-05-10

355

javascript html

我有这个计算器应用程序的 html 脚本，其中添加了要单击的按钮。我想使用 eventLister 获取用户单击的按钮，但我无法这样做。我在控制台中收到未捕获的类型错误：无法读取 null 的属性（读取“addEventListener”） init（script.js：86：43） at script.js：93：1 。

<body>
    
     <div class="wrapper">
        <section class="screen">
            0
        </section>
        <section class="calc-buttons">
            <div class="calc-button-row">
                <button class = "calc-button double">C</button>
                <button class="calc-button">&larr;</button>
                <button class="calc-button">&divide;</button>
            </div>
            <div class="calc-button-row">
                <button class="calc-button">7</button>
                <button class="calc-button">8</button>
                <button class="calc-button">9</button>
                <button class="calc-button">&times;</button>
            </div>
            <div class="calc-button-row">
                <button class="calc-button">4</button>
                <button class="calc-button">5</button>
                <button class="calc-button">6</button>
                <button class="calc-button">&minus;</button>
            </div>
            <div class="calc-button-row">
                <button class="calc-button">1</button>
                <button class="calc-button">2</button>
                <button class="calc-button">3</button>
                <button class="calc-button">&plus;</button>
            </div>
            <div class="calc-button-row">
                <button class="calc-button triple">0</button>
                <button class="calc-button">&equals;</button>
            </div>
        </section>
     </div>
    <script src="script.js"></script>
</body>

在 script.js 中，我使用

function init() {
    document.querySelector('calc-buttons').
        addEventListener('click', function (event) {
            console.log(event, "event in init")
            buttonClick(event.target.innerText);
        })
}
console.log('here')
init();

捕获单击的按钮，但它在 eventListners 中抛出错误。有人可以帮忙解决这个问题吗？

Answer 1

您需要让 querySelector 知道输入的字符串是类名 ('.calc-buttons') 还是 id ('#calc-buttons')。

此外，当您使用 document.querySelector('.calc-buttons')

如果要选择所有按钮，则需要使用：

document.querySelectorAll('.calc-button')

然后，您需要循环遍历按钮以向所有按钮添加事件监听器。例如这样：

const buttons = document.querySelectorAll('.calc-button')
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function (event) {
        buttonClick(event.target.innerText);
    })
}

所以，整个事情看起来会像这样：

function init() {
    const buttons = document.querySelectorAll('.calc-button')
    for (let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function (event) {
            console.log(event, "event in init")
            buttonClick(event.target.innerText);
        })
    }
}
console.log('here')
init();

Answer 2

在您的代码中，您忘记了 querySelector 中类名前面的点：正确的代码是：

function init() {
    document.querySelector('.calc-buttons')
        .addEventListener('click', function (event) {
            console.log(event, "event in init")
            buttonClick(event.target.innerText);
        });
}

console.log('here');
init();