javascript button actions are not responding-CodePudding

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:

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 >
            <div >
                <i ></i>
            </div>
            <div >
                <div id="display"></div>
            </div>
            <div >
                <table>
                    <tr>
                        <td><button  id="clear">C</button></td>
                        <td><button  id="/">/</button></td>
                        <td><button  id="*">*</button></td>
                        <td><button  id="backspace"> < </button></td>
                    </tr>
                    <tr>
                        <td><button  id="7">7</button></td>
                        <td><button  id="8">8</button></td>
                        <td><button  id="9">9</button></td>
                        <td><button  id="-">-</button></td>
                    </tr>
                    <tr>
                        <td><button  id="4">4</button></td>
                        <td><button  id="5">5</button></td>
                        <td><button  id="6">6</button></td>
                        <td><button  id=" "> </button></td>
                    </tr>
                    <tr>
                        <td><button  id="1">1</button></td>
                        <td><button  id="2">2</button></td>
                        <td><button  id="3">3</button></td>
                        <td rowspan="2"><button  id="equal">=</button></td>
                    </tr>
                    <tr>
                        <td><button  id=".">.</button></td>
                        <td><button  id="0">0</button></td>
                        <td><button  id="00">00</button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

swap buttons with button like this

const buttons = document.querySelectorAll("button");