英文:
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();
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论