功能适用于页面加载，但不适用于按钮单击

Question

我试图让我的网络应用程序在单击时运行，但它仅在页面最初加载时才有效。 如果我一直按 f5 它将随机选择一个项目并正常工作。 但我希望它在按下“下一步”按钮时这样做。

我正在尝试将 'locationTitle' id 更改为 myArray 中的随机项目。

当我打开开发人员工具并单击“下一步”按钮时，它会在 div 的“locationTitle”值上闪烁。

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

const random = Math.floor(Math.random() * myArray.length);
console.log(myArray[random]);

let my_btn = document.getElementById("my_btn");

function nextElement() {
    document.getElementById("locationTitle").innerHTML = (myArray[random]);
    

}


window.addEventListener("load", nextElement);
my_btn.addEventListener("click", nextElement);


html:
<button id = "my_btn" onclick = "nextElement()" ;>NEXT</button>

Answer 1

似乎每次单击按钮时都会调用该函数，但是您在脚本开头选择了一次随机值，并且每次都使用相同的值。

如果将随机值选择移到函数中，使函数如下所示，您应该会看到它每次都更改为不同的值：

...

function nextElement() {
    const random = Math.floor(Math.random() * myArray.length);
    document.getElementById("locationTitle").innerHTML = (myArray[random]); 
}

...