How do I input text onClick into a set of divs I created

Morzook Biobaku 0
Viewed 31

It populates all the divs at once instead of adding the texts one box at a time. What I want to do is to add an alphabet to each box. How do i achieve this?

 <div id="alphabet"></div>

 <div id="choice" class="choice">
    <div class="chi" id="chi">b</div>
    <div class="chi" id="chi">s</div>
    <div class="chi" id="chi">a</div>
    <div class="chi" id="chi">v</div>
    <div class="chi" id="chi">y</div>
    <div class="chi" id="chi">c</div>

const alphabet = document.getElementById('alphabet')
const input = document.getElementById('input')
const btn = document.querySelector('#btn')

let cc = 4;
for (let i = 0; i < cc; i++) {
  let tt = document.createElement('div')
tt.classList.add('newie')
alphabet.append(tt);

choice.addEventListener('click', populateDivs)
function populateDivs(e){
    let clickedAlphabet = e.target.innerText;
          tt.innerHTML = clickedAlphabet;

}
}
javascript-objects arrays javascript
1 Answers

You can do this with querySelectorAll.

const allDivs = document.querySelectorAll(".chi");

allDivs.forEach(function(element) {
   // Whatever you want to happen.
});
Filip Hrnjez0
Related