I can't access to argsButtons var outside functions and i don't know why
HTML:
<div class="args-container" id="args">
<button type="button" id="nuclear">click to see nuclear</button>
<button type="button" id="geothermal">click to see geothermal</button>
</div>
JavaScript:
let argsButtons;
window.onload = function(){
argsButtons = Array.from(document.getElementById("args").children);
}
//HERE IS THE ERROR (argsButtons is undefined)
argsButtons.forEach(e => e.addEventListener("click", myFunc()))
You don't need to get those button onload! you can simply do this:
const argsContainer = document.querySelector('.args-container');
const argsButtons = argsContainer.querySelectorAll('button');
function myFunc() {
console.log('clicked!')
}
argsButtons.forEach((button) => {
button.addEventListener('click', myFunc);
});