I need help with selecting multiple buttons in TypeScript. The code I tried doesn't seem to be working, so how can I achieve this?
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 class="input" id="input">0</p>
<p class="result" id="result">result</p>
</div>
<div>
<button class="style1" id="test" >AC</button>
<button class="style1" id="btn">Dell</button>
<button id="btn">7</button>
<button id="btn">8</button>
<button id="btn">9</button>
<button class="style2">×</button>
<button id="btn">4</button>
<button id="btn">5</button>
<button id="btn">6</button>
<button class="style2">÷</button>
<button id="btn">1</button>
<button id="btn">2</button>
<button id="btn">3</button>
<button class="style2" id="btn">-</button>
<button id="btn">0</button>
<button id="btn">.</button>
<button class="style2" id="btn">=</button>
<button class="style2" id="btn">+</button>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>