I am making a calculator with pure javascript. I need the number inside the button to print out if I click the button once. like if I click 1 it should display 1 on my screen and if I clicked 2 it should display 2 on my screen. only the number 2 without 1...
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>6</button>
<button>8</button>
<button>9</button>
<button>10</button>
how can I do that without the onclick event?
const display = document.getElementById('display')
document.getElementById('buttons').addEventListener('click', ({target}) => {
console.log(target.innerText)
display.innerHTML = target.innerText;
})<div id="buttons">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>6</button>
<button>8</button>
<button>9</button>
<button>10</button>
</div>
<div id="display"></div>You can use document.querySlectorAll. This will give nodelist, then iterate through it and add event listener , so that on click it displays the text content to a display area
const displayContainer = document.getElementById('display')
document.querySelectorAll('button').forEach((item) => {
item.addEventListener('click', (e) => {
displayContainer.innerHTML = e.target.textContent.trim();
})
})<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>6</button>
<button>8</button>
<button>9</button>
<button>10</button>
<div id='display'></div>This should get you going.
querySelectorAll] to select all the buttons.eventListener to all the buttons.event.target to get the value of button and make the logic from
there.const h1 = document.querySelector("h1");
const btns = document.querySelectorAll("button");
btns.forEach(btn => {
btn.addEventListener('click', event => {
h1.textContent = event.target.textContent;
});
});<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>6</button>
<button>8</button>
<button>9</button>
<button>0</button>
<h1></h1>