function works on page load but not on button click

user_19214862 0
Viewed 27

I'm trying to get my web app to run when clicked but it only works when the page is initially loaded. If I keep pressing f5 it will select an item randomly and work correctly. But I'd like for it to do so when the 'next' button is pressed.

I'm attempting to change the 'locationTitle' id to a random item from myArray.

When I open up the developer tools and click on the 'NEXT' button, it flashes on the 'locationTitle' value of the div.

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>
dom javascript
1 Answers

It seems the function is being called every time you click the button, but you choose your random value once at the beginning of the script and use the same value each time.

If you move the random value selection into the function, so that the function reads as follows, you should see it change to a different value each time:


...

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

...
user_24152380
Related