html - Javascript: even though I'm using window.onload I get the error 'var is not defined' - Stack Over

I'm trying to make a website with a button that goes to a next page and also calls a function in main.js, ignore the next page navigation for now.

What my HTML button code looks like:

<button onclick="resetAll()" id="beginButton" class="float-left submit-button"><h3>Begin</h3></button>

What my JS code looks like:

window.onload = function() {
  function resetAll() {
    // some resets and a log to show me it's been reset
    console.log("All reset");
  }
}

I expect the code to run through my js file until it finds the function 'resetAll()', but instead I get the error Uncaught ReferenceError: resetAll is not defined at HTMLButtonElement.onclick. I'd like to have this button link to the js file so my HTML doesn't get messed up with js code in there.

I've also tried to use the code

document.getElementById('beginButton').onclick = resetAll();

but that seems to run whenever the page get's loaded. As far as I know window.onload should make sure that the function is defined before the entire HTML page loads. My HTML script tag is in the head of my HTML code, so above the declaration of the button.

Can anyone help me out on this one? Because I keep getting stuck at issues like these..

I'm trying to make a website with a button that goes to a next page and also calls a function in main.js, ignore the next page navigation for now.

What my HTML button code looks like:

<button onclick="resetAll()" id="beginButton" class="float-left submit-button"><h3>Begin</h3></button>

What my JS code looks like:

window.onload = function() {
  function resetAll() {
    // some resets and a log to show me it's been reset
    console.log("All reset");
  }
}

I expect the code to run through my js file until it finds the function 'resetAll()', but instead I get the error Uncaught ReferenceError: resetAll is not defined at HTMLButtonElement.onclick. I'd like to have this button link to the js file so my HTML doesn't get messed up with js code in there.

I've also tried to use the code

document.getElementById('beginButton').onclick = resetAll();

but that seems to run whenever the page get's loaded. As far as I know window.onload should make sure that the function is defined before the entire HTML page loads. My HTML script tag is in the head of my HTML code, so above the declaration of the button.

Can anyone help me out on this one? Because I keep getting stuck at issues like these..

• javascript
• html

Share Improve this question Follow asked Dec 5, 2019 at 17:36 G BuisG Buis 30344 silver badges1717 bronze badges 2

• Yes, remove it from window.onload - and remove the () too: document.getElementById('beginButton').onclick = resetAll; – mplungjan Commented Dec 5, 2019 at 17:39
• It is not defined because the function is not in global scope. It is in the scope of the block for window.onload so the button click event listener can not find it. The function should not be inside of the onload. You want to use the load event to trigger things when the page loads. Now when you have reset() you are executing it and assigning what it returns to the event listener. It should just be document.getElementById('beginButton').onclick = resetAll; – epascarello Commented Dec 5, 2019 at 17:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Remove it from window.onload (which has its own scope) - and remove the () too: document.getElementById('beginButton').onclick = resetAll;

OR move the onclick inside:

window.onload = function() {
  document.getElementById('beginButton').onclick = function() {
    // some resets and a log to show me it's been reset
    console.log("All reset");
  }
}

Remended

window.addEventListener("load", function() {
  document.getElementById('beginButton').addEventListener("click", function(e) {
    e.preventDefault(); // remove if you want the button to submit
  // some resets and a log to show me it's been reset
    console.log("All reset");
  }
}

You defined your resetAll function as local function, you cannot access it from out of onload function.

You should define like this

window.onload = function() {
  window.resetAll = function () {
    // some resets and a log to show me it's been reset
    console.log("All reset");
  }
}

and you assinged execution result of resetAll to onclick.

You should

document.getElementById('beginButton').onclick = resetAll

I do not suggest using element.onclick syntax as others have suggested using. I also do not suggest inline events.

Instead, I suggest using the addEventListener() method.

document.querySelector("#beginButton").addEventListener("click", e => {
   // resets and other code you want to happen when clicked 
   console.log("clicked!"); // just for the example
});

<button id="beginButton" class="float-left submit-button"><h3>Begin</h3></button>

The reason your code doesn't work is that the function isn't created until the page loads so the inline function is undefined.

You don't need to wait for window onload if you put your JavaScript at the end if your <body> tag.