How to select multiple buttons in typescript-CodePudding

I am trying to select multiple buttons in typescript but it does not work, how can I do that?

var input = document.getElementById('input');
var result = document.getElementById('result');
var button = Array.from(document.getElementsByClassName('btn'));
button.forEach(function (btn) {
    btn.addEventListener('click', function (e) {
        console.log('hfello');
    });
});

@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;800&display=swap');
*{
    margin: auto;
    padding: 0;
    font-family: 'Epilogue', sans-serif;
}
body{
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}
body >div{
    max-width: 500px;
    margin: 50px auto;
    border-radius: 10px;
    background: linear-gradient(to bottom, #2e2e2e, #000000);
}
body >div div:first-child{
    width: 100%;
}
.input{
    color: white;
    font-size: 30px;
    padding: 10px;
    direction: rtl
}
.result{
    color: white;
    font-size: 30px;
    padding: 10px;
    direction: rtl
}

body div div:last-child{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px
}
button{
    padding: 20px 30px;
    font-size: 30px;
    color: white;
    background: #2e2e2e;
    border: none;
    border-radius: 50%;
}
button:first-child{
    grid-column: 1/3;
}
button:nth-child(2){
    grid-column: 3/5;
}
.style1{
    background-color: gray;
}
.style2{
    background-color: rgb(204, 137, 12);
}

@media (max-width:900px){
    body > div{
        width: 100%;
        height: 100vh;
        margin: auto;
    }
}

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="./style.css">
    <title>Calculator</title>
</head>
<body>
    <div>
        <div>
            <p  id="input">0</p>
            <p  id="result">result</p>
        </div>
        <div>
            <button  id="test" >AC</button>
            <button  id="btn">Dell</button>
            <button id="btn">7</button>
            <button id="btn">8</button>
            <button id="btn">9</button>
            <button >×</button>
            <button id="btn">4</button>
            <button id="btn">5</button>
            <button id="btn">6</button>
            <button >÷</button>
            <button id="btn">1</button>
            <button id="btn">2</button>
            <button id="btn">3</button>
            <button  id="btn">-</button>
            <button id="btn">0</button>
            <button id="btn">.</button>
            <button  id="btn">=</button>
            <button  id="btn"> </button>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

CodePudding user response：

You cannot select your buttons with:

var button = Array.from(document.getElementsByClassName('btn'));

Because your button elements don't have a "btn" class on them.

Instead, if you change that line to:

var button = Array.from(document.querySelectorAll('button'));

It selects all the buttons by the fact that they are a button element.

JsFiddle

CodePudding user response：

var input = document.getElementById('input');
var result = document.getElementById('result');
var button = Array.from(document.getElementsByClassName('btn'));
button.forEach(function (btn) {
    btn.addEventListener('click', function (e) {
        console.log('hfello');
    });
});

@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;800&display=swap');
*{
    margin: auto;
    padding: 0;
    font-family: 'Epilogue', sans-serif;
}
body{
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}
body >div{
    max-width: 500px;
    margin: 50px auto;
    border-radius: 10px;
    background: linear-gradient(to bottom, #2e2e2e, #000000);
}
body >div div:first-child{
    width: 100%;
}
.input{
    color: white;
    font-size: 30px;
    padding: 10px;
    direction: rtl
}
.result{
    color: white;
    font-size: 30px;
    padding: 10px;
    direction: rtl
}

body div div:last-child{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px
}
button{
    padding: 20px 30px;
    font-size: 30px;
    color: white;
    background: #2e2e2e;
    border: none;
    border-radius: 50%;
}
button:first-child{
    grid-column: 1/3;
}
button:nth-child(2){
    grid-column: 3/5;
}
.style1{
    background-color: gray;
}
.style2{
    background-color: rgb(204, 137, 12);
}

@media (max-width:900px){
    body > div{
        width: 100%;
        height: 100vh;
        margin: auto;
    }
}

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="./style.css">
    <title>Calculator</title>
</head>
<body>
    <div>
        <div>
            <p  id="input">0</p>
            <p  id="result">result</p>
        </div>
        <div>
            <button  id="ac" >AC</button>
            <button  id="dell">Dell</button>
            <button >7</button>
            <button >8</button>
            <button >9</button>
            <button >×</button>
            <button >4</button>
            <button >5</button>
            <button >6</button>
            <button >÷</button>
            <button >1</button>
            <button >2</button>
            <button >3</button>
            <button  id="btn">-</button>
            <button >0</button>
            <button >.</button>
            <button  id="btn">=</button>
            <button  id="btn"> </button>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

change id="btn" to