如何解决HTML中点击按钮仅显示第一个数组随机项，无法同步获取两个数组对应项的问题

看起来你遇到的问题主要有几个小细节没处理好，我帮你梳理并修复一下：

首先，咱们先分析问题根源：

• 你只给class为item的按钮绑定了点击事件，另一个按钮item2完全没绑定事件，所以点击它不会有任何反应；
• 变量random没有用let/const声明，会变成全局变量，这是个不好的习惯，容易引发意外问题；
• 如果你的JS代码放在HTML结构前面（比如<head>里），DOM元素还没加载完成，可能导致获取元素失败，更新操作无法执行。

下面是修复后的完整代码，我还做了一些优化：

<button class="item">Array 1</button>
<button class="item2">Array2</button>
<p><span> Array1 : </span><span class="itemValue"></span></p>
<p><span> Array2 : </span><span class="itemValue2"></span></p>

<script>
// 用const声明数组，因为咱们不会修改数组本身
const myarray = ['1', '2', '3', '4'];
const myarray2 = ['a', 'b', 'c', 'd'];

// 提前缓存需要更新的DOM元素，不用每次点击都重新查一遍
const itemValueEl = document.querySelector('.itemValue');
const itemValue2El = document.querySelector('.itemValue2');

// 把更新逻辑抽成通用函数，避免重复代码
function updateRandomPairs() {
    // 声明random变量，避免全局污染
    const randomIndex = Math.floor(Math.random() * myarray.length);
    // 用textContent代替innerHTML，更安全（不会解析HTML），性能也更好
    itemValueEl.textContent = myarray[randomIndex];
    itemValue2El.textContent = myarray2[randomIndex];
}

// 给两个按钮都绑定点击事件，点击任意一个都会更新成对的随机项
document.querySelector('.item').addEventListener('click', updateRandomPairs);
document.querySelector('.item2').addEventListener('click', updateRandomPairs);
</script>

几个关键的修改点说明：

1. DOM加载时机：把JS代码放在HTML末尾（</body>标签前），确保所有DOM元素都已创建，能正确获取和绑定事件；
2. 变量规范：用const声明数组和DOM元素变量，明确它们不会被重新赋值，代码更清晰；
3. 性能优化：提前缓存DOM元素，避免每次点击都重复查询DOM树；
4. 代码复用：把更新逻辑抽成单独的函数，两个按钮共用同一个逻辑，减少冗余；
5. 安全与性能：用textContent代替innerHTML，如果只是设置纯文本内容，这是更好的选择。

这样修改后，点击任意一个按钮，都会生成一个随机索引，同时更新两个数组对应的项，完全符合你的需求～

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