英文:
How to fix Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
问题
我有一个用于计算器应用的 HTML 脚本，带有添加的按钮进行点击操作。我想使用 eventListener 获取用户点击的按钮，但我无法这样做。我得到了以下错误：
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
init (script.js:86:43)
at script.js:93:1
在 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();
用于捕获按钮点击，但在 eventListeners 中抛出错误。有人可以帮助修复这个问题吗？
英文:
Im having this html script for a calculator App, with added buttons to click.
I want to use eventLister to get the button clicked by the user but I'm not able to do so.
Im getting
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
init (script.js:86:43)
at script.js:93:1
in console.
<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>
In script.js I'm using,
function init() {
document.querySelector('calc-buttons').
addEventListener('click', function (event) {
console.log(event, "event in init")
buttonClick(event.target.innerText);
})
}
console.log('here')
init();
to capture the button clicked but its throwing error in eventListners.
Can someone help fix the issue?
答案1
得分: 3
你需要告诉 querySelector，输入的字符串是类名（'.calc-buttons'）还是ID（'#calc-buttons'）。
当你使用 document.querySelector('.calc-buttons') 时，你实际上是选择了section标签。
如果你想选择所有按钮，你需要使用：
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();
注意：以上代码示例已被翻译为中文。
英文:
You need to let querySelector know, if the entered string is a class name ('.calc-buttons') or an id ('#calc-buttons').
Also, you are selecting the section tag when you use document.querySelector('.calc-buttons')
If you want to select all buttons, you need to use:
document.querySelectorAll('.calc-button')
And then you need to loop through the buttons to add event listeners to all buttons. For example like this:
const buttons = document.querySelectorAll('.calc-button')
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function (event) {
buttonClick(event.target.innerText);
})
}
So, the whole thing would look like this:
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();
答案2
得分: 0
在你的代码中，你忘记在querySelector中类名前加点：正确的代码是：
function init() {
document.querySelector('.calc-buttons')
.addEventListener('click', function (event) {
console.log(event, "init中的事件")
buttonClick(event.target.innerText);
});
}
console.log('这里');
init();
英文:
In your code you forgot the dot before the class name in the querySelector :
The correct code is :
function init() {
document.querySelector('.calc-buttons')
.addEventListener('click', function (event) {
console.log(event, "event in init")
buttonClick(event.target.innerText);
});
}
console.log('here');
init();
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论