Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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
216,688 Points
Steven Parker
Steven Parker
216,688 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) { ....................................