Today, I was creating a calculator, but when I click on the numbers nothing happenes.
- There are no messages in the console at all after the clicks
Code in GitHub: https://github.com/GuillermoSalvador/A
const display = document.querySelector("#display");
const buttons = document.querySelectorAll("buttons");
buttons.forEach((item)=>{
item.onclick=()=>{
if(item.id=="clear"){
display.innerText="";
}else if(item.id=="backspace"){
let string = display.innerText.toString();
display.innerText=string.substr(0,string.length-1)
} else if (display.innerText !=""&& item.id=="equal"){
display.innerText = eval(display.innerText);
} else if(display.innerText == "" && item.id=="equal"){
display.innerText = "Null";
setTimeout(()=>(display.innerText = ""), 2000);
}else{
display.innerText+=item.id;
}
};
});<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class ="container">
<div class="calculator dark">
<div class="theme-toggler">
<i class="toggler-icon"></i>
</div>
<div class="display-screen">
<div id="display"></div>
</div>
<div class="buttons">
<table>
<tr>
<td><button class="btn-operator" id="clear">C</button></td>
<td><button class="btn-operator" id="/">/</button></td>
<td><button class="btn-operator" id="*">*</button></td>
<td><button class="btn-operator" id="backspace"> < </button></td>
</tr>
<tr>
<td><button class="btn-number" id="7">7</button></td>
<td><button class="btn-number" id="8">8</button></td>
<td><button class="btn-number" id="9">9</button></td>
<td><button class="btn-operator" id="-">-</button></td>
</tr>
<tr>
<td><button class="btn-number" id="4">4</button></td>
<td><button class="btn-number" id="5">5</button></td>
<td><button class="btn-number" id="6">6</button></td>
<td><button class="btn-operator" id="+">+</button></td>
</tr>
<tr>
<td><button class="btn-number" id="1">1</button></td>
<td><button class="btn-number" id="2">2</button></td>
<td><button class="btn-number" id="3">3</button></td>
<td rowspan="2"><button class="btn-equal" id="equal">=</button></td>
</tr>
<tr>
<td><button class="btn-operator" id=".">.</button></td>
<td><button class="btn-number" id="0">0</button></td>
<td><button class="btn-number" id="00">00</button></td>
</tr>
</table>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2
Answers
As hinted at by @jaromanda-x in the comments, your selector for the buttons was wrong, the elements that you want to select are
buttonso make sure you use that in the query:There are no errors or messages related to this in the console or the output because there are no runtime issues with the code.
Your current query:
document.querySelectorAll("button")returns an empty array, because there are no<buttons>elements in the DOM. To debug click events in the future, put a console message in the handler, that way you know that the handler has been executed at all:Don’t forget to remove of comment out these types of logs later, they are for simple diagnostics
If there is no message in the console, then look into your code that registers the event, sometimes you might be using inline registration from the html or dynamic logic like your current example.
In the current code you could log out the number of buttons for instance:
You can also use the console in the browser tools to execute javascript against your active page, so you could execute the
querySelectAllin a live sense:You should find this simple tool very helpful both for rapid development but also your learning.
In the future, please use code snippets or Stack-Snippets to display simple html/javascript issues rather than a link to an external site. Issues like this are immediately obvious if we can see the code, but we don’t want to have to leave SO to do that… Developers like me are inherently lazy 😉
swap buttons with button like this
const buttons = document.querySelectorAll("button");