JavaScript函数页面加载生效 按钮点击无法触发随机内容更新

• 页面初始加载、按F5刷新时，可以正常从数组中随机选取条目展示
• 点击「NEXT」按钮时，id为locationTitle的元素内容仅闪现，不会更新为新的随机数组条目
• 预期效果：点击按钮即可触发随机选值逻辑，将locationTitle的内容替换为myArray数组中的随机条目

• 随机索引生成逻辑位置错误：原代码中const random = Math.floor(Math.random() * myArray.length);写在函数外部，仅在页面首次加载时执行一次，后续所有函数调用都复用这个固定的索引值，无法生成新的随机结果
• 点击事件重复绑定：原代码同时通过addEventListener和HTML行内onclick属性给按钮绑定了两次nextElement触发逻辑，点击时会重复执行函数，导致内容闪现异常
• DOM获取时序风险：原代码直接在全局作用域获取按钮元素，若脚本加载时机早于DOM渲染，会出现获取元素为null的报错

调整代码逻辑，修复后完整代码如下：

let myArray = [
    'Boardwalk', 
    'Highland Park', 
    'Waterfront',
    'Beach', 
    'North End', 
    'Canal',
    'Wiley Island', 
    'Conservation Park', 
    'Dufferin Falls',
    'Old Town',
]

function nextElement() {
    // 每次执行函数时重新生成随机索引，保证每次取到新的随机值
    const randomIndex = Math.floor(Math.random() * myArray.length);
    const randomItem = myArray[randomIndex];
    console.log(randomItem);
    document.getElementById("locationTitle").textContent = randomItem;
}

// 等页面DOM完全加载完成后再执行初始渲染、绑定事件
window.addEventListener("load", () => {
    nextElement();
    const myBtn = document.getElementById("my_btn");
    myBtn.addEventListener("click", nextElement);
})

对应HTML按钮代码移除行内事件绑定：

<button id="my_btn">NEXT</button>

修改点说明 #

• 将随机索引生成逻辑移入nextElement函数内部，每次页面加载、按钮点击触发函数时，都会重新生成随机索引，拿到新的数组条目
• 移除按钮标签上冗余的onclick行内绑定，仅在DOM加载完成后绑定一次点击事件，避免重复触发
• 将DOM元素获取、事件绑定逻辑放到load事件回调中，避免因脚本加载过早导致的DOM获取失败问题
• 纯文本渲染场景推荐使用textContent替代innerHTML，可规避XSS风险，渲染性能也更优

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