如何实现点击时逐个向创建的div中输入字母而非批量填充？

问题根源 #

1. 你在循环内部重复绑定点击事件，导致choice被多次添加监听，触发时会执行多轮逻辑。
2. 变量tt在循环结束后仅指向最后一个创建的<div>，所以每次点击都会修改这个最后一个div的内容，造成“一次性填充所有div”的错觉。
3. 没有跟踪当前需要填充的div位置，无法实现逐个填充的逻辑。

修改后的代码 #

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

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

<script>
const alphabet = document.getElementById('alphabet')
const choice = document.getElementById('choice')

let cc = 4;
// 存储所有创建的div，方便按顺序访问
const divList = [];
// 记录当前要填充的div索引，从第一个开始
let currentIndex = 0;

// 批量创建div并存入数组
for (let i = 0; i < cc; i++) {
  let tt = document.createElement('div')
  tt.classList.add('newie')
  alphabet.append(tt);
  divList.push(tt);
}

// 仅绑定一次点击事件
choice.addEventListener('click', populateDivs)

function populateDivs(e){
    // 只处理点击字母选项的情况
    if (!e.target.classList.contains('chi')) return;
    
    let clickedAlphabet = e.target.innerText;
    // 检查是否还有未填充的div
    if (currentIndex < divList.length) {
        divList[currentIndex].innerHTML = clickedAlphabet;
        // 索引后移，下次点击填充下一个div
        currentIndex++;
    }
}
</script>

关键修改点 #

• 将创建的所有div存入divList数组，便于按顺序逐个访问。
• 用currentIndex跟踪当前填充位置，每次填充后自动后移索引。
• 把点击事件绑定移到循环外部，避免重复绑定导致的逻辑混乱。
• 增加判断逻辑，仅在点击字母选项时执行填充，防止误触父元素。
• 移除了重复的id="chi"，页面中ID必须唯一，重复ID会导致DOM操作异常。

内容的提问来源于stack exchange，提问作者Morzook Biobaku