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 JavaScript and the DOM (Retiring) Responding to User Interaction Delaying Execution with setTimeout()

Kristoffer A-L
Kristoffer A-L
5,863 Points
Posted by Kristoffer A-L
Kristoffer A-L
5,863 Points

Not able to delay function

Hi! I'm building a Magic Eight Ball with a combination of JavaScript, CSS and HTML. I would like to add a delay effect of the answer finally being revealed, but I can't seem to get it right. My instinct was to add window.setTimeout(message(), 3000); to the message()-function, but nothing happens. I'd appreciate the help!

Here is my JS code:

const myButton = document.getElementById('myButton');

const myInput = document.getElementById('myInput');

const myText = document.getElementById('question');

const myAnswer = document.getElementById('answer')


myButton.addEventListener('click', () => {
    message();
  }
);

function message() => {

  myText.textContent = 'Your question is  ' + myInput.value;
  var message = 'Magic Eight Ball says: ';
  var rNum = Math.floor(Math.random() * 10);

  if (rNum === 0) {
    myAnswer.textContent = message += 'Most certainly.'
};     ...................

1 Answer

Steven Parker
Steven Parker
229,785 Points
Steven Parker
Steven Parker
229,785 Points

Passing a callback is one of the few times that you will use a function name without putting parentheses after it. Otherwise it's called immediately instead of after the time elapses. So you'd put this in your event listener function:

        window.setTimeout(message, 3000);

There's also some syntax issues:

  • the function definition for "message" shouldn't have the "=>" symbol
  • when concatenating the answer for assignment, use "+" instead of "+="
  • the function shouldn't concatenate itself with a string, what did you intend to join to the answer?
Kristoffer A-L
Kristoffer A-L
5,863 Points
Kristoffer A-L
Kristoffer A-L
5,863 Points

Thank you Steven Parker! I realized after some time that I had made a copy of my working file and forgot to link the correct JavaScript file, so no wonder my experiments had little effect... Anyway, I did some editing and the code is working perfectly fine now. Again, thanks!

const myButton = document.getElementById('myButton');
const myInput = document.getElementById('myInput');
const myText = document.getElementById('question');
const myAnswer = document.getElementById('answer')


myButton.addEventListener('click', () => {
  window.setTimeout(reveal, 2000);
});

function reveal() {
myText.textContent = 'Your question is: ' + myInput.value;
var message = 'The Magic Eight Ball says: ';
var rNum = Math.floor(Math.random() * 10);

  if (rNum === 0) {
    myAnswer.textContent = message + 'Most certainly.';
  } else if (rNum === 1) { ....................................