JavaScript初学者技术求助：如何点击按钮后通过循环批量修改指定输入框的值

Hey there! 你想用forEach实现这个需求的思路完全正确，这确实是批量操作DOM元素的好方法。我来一步步帮你把代码补全：

第一步：获取顶部所有需要修改的输入框 #

你的现有代码只拿到了底部的输入框A和发送按钮，还需要选中顶部的那些输入框。因为它们没有单独的ID，我们可以用排除选择器选中除了#js-input之外的所有<input>元素：

const topInputs = document.querySelectorAll('input:not(#js-input)');

第二步：完善点击事件的逻辑 #

在点击send按钮时，我们需要完成两个核心操作：

1. 获取输入框A的内容（记得去除前后多余空格）
2. 用forEach遍历每个顶部输入框，把它们的value替换成输入框A的值

完整可运行代码 #

HTML（保持你的原有结构）

<input type="text" value="123">
<input type="text" value="666">
<input type="text" value="345">
<input type="text" value="1000">
<h2>I want to change all this numbers</h2>
A <input type="text" id="js-input"><button id="js-send">send</button>

JavaScript

// 获取底部的输入框A和发送按钮
const jsInput = document.querySelector('#js-input');
const jsSend = document.querySelector('#js-send');
// 获取顶部所有需要修改的输入框（排除底部的#js-input）
const topInputs = document.querySelectorAll('input:not(#js-input)');

// 给按钮绑定点击事件
jsSend.addEventListener('click', function() {
    // 获取输入框A的值，去除前后空格
    const targetValue = jsInput.value.trim();
    
    // 用forEach遍历每个顶部输入框，修改它们的值
    topInputs.forEach(input => {
        input.value = targetValue;
    });
});

额外小优化（可选） #

如果你想确保用户输入的是有效数字，可以加个简单的判断逻辑：

jsSend.addEventListener('click', function() {
    const targetValue = jsInput.value.trim();
    // 判断是否为非空的有效数字
    if (!isNaN(targetValue) && targetValue !== '') {
        topInputs.forEach(input => {
            input.value = targetValue;
        });
    } else {
        alert('请输入有效的数字哦！');
    }
});

现在点击send按钮，顶部的输入框就会同步变成你在输入框A里输入的内容啦😉

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