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

Mike White
Mike White
23,234 Points
Posted by 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
229,732 Points
Steven Parker
Steven Parker
229,732 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
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.