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

Mike White
Mike White
23,234 Points

My javascript application is not functioning the way I expect it to.

For practice I've written a multiplication flashcard app. I got it to work, sort of. I expected it to keep providing new cards but it will only provide one card and then the app restarts.

I've been trying to figure this out for the last couple of days and now I need some fresh eyes it. I fully expect it to be something either super silly or the app is totally wrong.

http://codepen.io/myquite/pen/zNWYNq/

If you could point me in the right direction I'd really appreciate it.

1 Answer

Steven Parker
Steven Parker
220,696 Points

The form behavior is reloading the page.

I just eliminated the form from the HTML.

While I was playing with the project, I made a few other changes you might be interested in:

When the card first appeared, I had to click on it before I could input my answer. To prevent that, I added this line to createNewFactors:

    answerInput.focus();

When it was time for the next card, the message was still covering it. Plus the input area still contained the last answer given. So I added these lines to nextCard:

    answerInput.value = null;       // clear the answer area
    message.style.display = "none"; // put the message away so the card can be seen

Finally, the response message went by too fast to read, so in displayAlert, instead of calling nextCard directly, I did this instead to display the result for 3 seconds:

//  nextCard();                     <- instead of doing this right now...
    setTimeout(nextCard, 3000);     // wait 3 seconds and THEN call nextCard

Cute little project, by the way! :+1:

Mike White
Mike White
23,234 Points

Such a huge weight off. Thank you Steve.

I used the input's autofocus in the HTML but for whatever reason it doesn't work well inside CodePen, so I like your suggestion.

<input autofocus required type="number" name="answer" id="answer"/>

I decided to add a duration argument to the displayAlert function so that I could control the timeout. Make it longer for incorrect answers.

function displayAlert(alertMessage, color, duration) {

    setTimeout(nextCard, duration);
  }

I feel a million times better now. This has been bugging the hell out of me for two days.

P.S. I see your in BR, I'm in Lake Charles.