JavaScript点击按钮如何仅为父div内对应文本框赋值？

现有代码的问题是点击事件触发时，你遍历了页面内所有.textbox元素统一赋值，所以会同步修改所有文本框，没有将修改范围限制在当前点击按钮对应的关联区域内。

你只需要在点击按钮时，先定位到当前按钮所在的父级div容器，再查找该容器内的.textbox元素单独赋值即可，修改后代码如下：

let buttoninput = document.querySelectorAll(".buttoninput");

buttoninput.forEach(btn => {
    btn.addEventListener('click', () => {
        // 定位当前按钮所属的父div，查找对应文本框
        const targetTextbox = btn.parentNode.querySelector('.textbox');
        targetTextbox.value = btn.innerHTML;
    });
});

如果后续你的页面结构调整，按钮外部可能新增嵌套层级，可将parentNode替换为closest('div')，适配性更强，写法如下：

const targetTextbox = btn.closest('div').querySelector('.textbox');

该方案无需给元素绑定独立ID，后续新增任意数量的按钮+文本框组合，只要保持父div包裹文本框和按钮的结构不变，代码无需额外修改即可自动适配。

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