如何实现点击cls类元素，将其innerHTML填入指定input输入框？

现有HTML结构 #

输入框 #

<input type='text' class='txtwarna' name='txtwarna' value=''/> 

可点击元素列表 #

<div class="ct-a">
    <ul class='wr'>
        <li class='cls color1'>Kuning</li>
        <li class='cls color2'>Putih</li>
        <li class='cls color3'>Hijau</li>
        <li class='cls color4'>Biru</li>                          
    </ul>
</div>
<div class="ct-b">
    <ul class='wr'>
        <li class='cls color1'>Biru</li>
        <li class='cls color2'>Hitam</li>
        <li class='cls color3'>Putih</li>
        <li class='cls color4'>Merah</li>
        <li class='cls color5'>Coklat</li>
        <li class='cls color6'>Abu-abu</li>                          
    </ul>
</div>

原错误代码 #

var strHtml = document.getElementsByClassName("cls");
var valInput = document.getElementsByClassName("txtwarna");
for (var i = 0; i  < strHtml.length; i++) {
    strHtml[i].addEventListener('click', function() {
        valInput.value = strHtml.innerHTML; 
});
}

错误原因 #

• getElementsByClassName返回的是HTMLCollection（元素集合），不是单个元素，直接用valInput.value无法赋值，需要取集合中的第一个元素valInput[0]
• 事件回调里的strHtml.innerHTML逻辑错误，strHtml是所有.cls元素的集合，应该用this.innerHTML获取当前点击元素的内容
• 用var声明循环变量会存在闭包问题，导致点击事件无法正确关联当前元素

修正后的代码 #

// 获取所有带cls类的元素
const colorItems = document.getElementsByClassName("cls");
// 获取输入框（因只有一个，直接取集合第一个元素）
const inputBox = document.getElementsByClassName("txtwarna")[0];

// 遍历所有可点击元素，绑定点击事件
for (let i = 0; i < colorItems.length; i++) {
    colorItems[i].addEventListener('click', function() {
        // 将当前点击元素的内容赋值给输入框
        inputBox.value = this.innerHTML;
    });
}

优化写法（事件委托） #

如果后续会动态添加.cls元素，推荐使用事件委托——只给共同父元素绑定一次事件，性能更优且无需重新绑定：

const inputBox = document.getElementsByClassName("txtwarna")[0];

// 给所有列表的共同父元素绑定事件（这里用body，也可以指定更精准的父容器）
document.body.addEventListener('click', function(e) {
    // 判断点击目标是否为带cls类的元素
    if (e.target.classList.contains('cls')) {
        inputBox.value = e.target.innerHTML;
    }
});

内容的提问来源于stack exchange，提问作者Andrea Saturnus