As hinted at by @jaromanda-x in the comments, your selector for the buttons was wrong, the elements that you want to select are button so make sure you use that in the query:
const buttons = document.querySelectorAll("button");
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:
buttons.forEach((item)=>{
item.onclick=()=>{
console.log('button click: ' + item.id);
...
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:
const buttons = document.querySelectorAll("button");
console.log(`buttons found: ${buttons}:${buttons. Length}`);
You can also use the console in the browser tools to execute javascript against your active page, so you could execute the querySelectAll in 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 😉
const display = document.querySelector("#display");
const buttons = document.querySelectorAll("button");
console.log(`buttons found: ${buttons}:${buttons. Length}`);
buttons.forEach((item)=>{
item.onclick=()=>{
console.log('button click: ' + item.id);
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>