jsFiddle says jQuery code is incorrect but still works on my site

Question

I'm having trouble correcting this code, since I have very little experience with jQuery:

$("#msg-button").click(function() {
    $("#msg_alert").removeClass("msg_stop").addClass("msg_play");
    setTimeout(function() {
        $("#msg_alert").removeClass("msg_play").addClass("msg_stop")
    }, 2000);
});

The thing is, when I use the "incorrect code," the effect I'm aiming for works.

This script is my workaround for restarting a CSS3 animation. Whenever the user clicks id #button, id #msg_alert is displayed by playing out the animation in class .msg_play. The animation lasts for two seconds; hence, there is a two-second delay for the next part of the script, which basically switches id#msg_alert back to class.msg_stop.

I tried following the error alert returned by jsFiddle, but after changing the code accordingly, the script stops working. (Although actually, when I run jslint again after correcting the first two errors, I get more errors, so I keep correcting them until jsFiddle tells me that my code is invalid.

By the way, the code I used above only returns one error. (That's because correcting only one of the two errors shown still made the script functional.) The first error: I forgot to put a semicolon after "2000)". (How stupid of me!) Second error: Problem at line 4 character 69: Missing semicolon. $("#msg_alert").removeClass("msg_play").addClass("msg_stop")... — themiseducated, Nov 12 '12 at 14:50

SpYk3HH · Answer 1 · 2012-11-12T17:30:30.370

I dont see much wrong with your code, a link to the fiddle would be helpful. However, I do have a couple of suggestions. first, use a timer variable to prevent multi-click issues. As such:

var tmrMsgPlay;
$("#msg-button").click(function(e) {
    $("#msg_alert").removeClass("msg_stop").addClass("msg_play");
    if (tmrMsgPlay != undefined) clearTimeout(tmrMsgPlay);
    tmrMsgPlay = setTimeout(function() {
        $("#msg_alert").removeClass("msg_play").addClass("msg_stop");
    }, 2000);
});

Second suggestion would be to set msg_alert to already have the class msg_stop, and then use jQuery's toggleClass, as so:

//  preset msg_alert to have class 'msg_stop' at start, then use toggleClass
var tmrMsgPlay;
$("#msg-button").click(function(e) {
    if (tmrMsgPlay != undefined) clearTimeout(tmrMsgPlay);
    $("#msg_alert").toggleClass("msg_play msg_stop");
    tmrMsgPlay = setTimeout(function() {
        $("#msg_alert").toggleClass("msg_play msg_stop");
    }, 2000);
});

I went ahead with your first suggestion. It's valid, but it didn't work. When I edited it this way, however: var timerMsgPlay; $("#msg_button").click(function() { $("#msg_alert").removeClass("msg_stop").addClass("msg_play"); timerMsgPlay = setTimeout(function() {$("#msg_alert").removeClass("msg_play").addClass("msg_stop");}, 2000); }); it worked! (The best part: It's also valid!) Thanks so much for the suggestion. :D — themiseducated, Nov 12 '12 at 15:19
P/S - Okay, the code didn't show up properly in my comment. Just assume proper indentation. — themiseducated, Nov 12 '12 at 15:23

score 0 · Answer 2 · answered Nov 12 '12 at 14:58

JSHint Report /*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, unused:true, curly:true, browser:true, jquery:true, indent:4, maxerr:50 */

Errors:

Line 4: $("#msg_alert").removeClass("msg_play").addClass("msg_stop") Missing semicolon.

score 0 · Answer 3 · answered Nov 12 '12 at 14:58

0

Try this instead:

$("#msg-button").click(function() {
    $("#msg_alert").removeClass("msg_stop").addClass("msg_play").delay(2000).removeClass("msg_play").addClass("msg_stop");
});

answered Nov 12 '12 at 14:58

Matt Mombrea

6,793
2
20
20

jsFiddle says jQuery code is incorrect but still works on my site

3 Answers3