I've come across an issue while using a JavaScript file to hide several divs all sharing the same class name. The program successfully hides the divs, but when I try to make them visible again after a certain number of seconds, the array of elements becomes undefined with a length of 0. I'm not sure what's causing this problem. I attempted to change "lowerDash" to a global variable, but it didn't work.
function newBaseHandler(){
if (document.getElementById("Base6").innerHTML == `<br><p>Create new base</p>`) {
let lowerDash = document.getElementsByClassName("LowerDashboard");
let message = document.getElementById("Message");
for (let button of lowerDash) {
button.style.visibility = "hidden";
}
message.innerHTML = `<br><p>Base created successfully</p>`;
setTimeout(function() {
message.innerHTML = ``;
console.log(lowerDash.length);
for (let button of lowerDash) {
button.style.visibility = "visible";
}
}, 1000);
}
}