Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Callum Anderson
Callum Anderson
8,837 Points

window.setTimeout() as button event handler - fires without button click?

I wanted to expand a little on window.setTimeout(), so I passed it in as the event handler on a button click. Strangely, it fires upon page load (that is, after the specified delay) instead of running after the button click! Any ideas as to why this is?

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>
  </head>
  <body>
    <button id="listButton">Delayed List Effect</button>
    <p class="description">Things that are purple:</p>
    <ul>
      <li>grapes</li>
      <li>amethyst</li>
      <li>lavender</li>
      <li>plums</li>
    </ul>
    <script src="setTimeOut.js"></script>
  </body>
</html>

const listButton = document.querySelector('#listButton');
const listItems = document.getElementsByTagName('li');

listButton.addEventListener('click', window.setTimeout(() =>
  {
    for (i=0; i<listItems.length; i++) {
      if (i%2==0) {
        listItems[i].style.backgroundColor = "purple";
      } else {
        listItems[i].style.color = "purple";
      }
    }
  }, 5000)
);

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

By placing arguments in parentheses after the function name, you're invoking the function and then passing what it returns (which in this case is a timer ID) as callback (which it is not the correct type). So instead of registering a handler you're directly starting the timer.

The callback argument should be only a function name (with no parentheses) or an anonymous function expression.

Callum Anderson
Callum Anderson
8,837 Points

Thanks, I think I understand the first part - the incorrect use of the addEventListener handler. I've moved that section out into a separate named function, and referenced it within the addEventListener handler (see below).

I still don't quite understand how that code ran from within the addEventListener code when there was no 'click' to instigate it.

Fixed code (working):

const divList = document.querySelector('#divList');
const listButton = document.querySelector('#listButton');
const listItems = document.getElementsByTagName('li');

listButton.addEventListener('click', delay);

function delay() {
  window.setTimeout(() =>
{
  for (i=0; i<listItems.length; i++) {
    if (i%2==0) {
      listItems[i].style.backgroundColor = "purple";
    } else {
      listItems[i].style.color = "purple";
    }
  }
}, 5000);
};
Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Coding your function as an invocation (call) caused it to run immediately to get the return value to pass along to addEventListener. So it had nothing to do with the button or the click event. Because of the argument type mismatch, the handler was not being established anyway.

Callum Anderson
Callum Anderson
8,837 Points
Callum Anderson
Callum Anderson
8,837 Points

Ah OK, I don't think this has been covered in any of the courses I've done to date. Hopefully it will be covered in more detail at some point. I think I understand the principle though, thanks :)