Jquery onclick var update

Question

This is a very simple, probably too simple question but I'm afraid my limited skills in jQuery require someone's help! Behold the shameful line of code:

onclick="javascript:  $j('#'+openc).fadeOut('normal', function({
$j('#'+openc).fadeIn('slow')});
openc=+1;
alert('The city of ' + openc + ' is located in ' + openc + '.');"

By default, openc is set to 0.

Onclick, the div with the id 0 is faded out, and I wish to have div id 1 open, then openc to b updated to 1. I added the alert for my own sake. When I press once, it seems to work. When I press it again, it still alerts 1, thus my div id 1 fades out and right back in. I think I just need to add +1 to the fadeIn function with the onclick, so that it will always open openc+1 but..can't seem to get the syntax right.

Thanks!

EDIT: Perhaps my question was not clear enough, I figured I would add some info. I beg you to not suggest things such as adding event-handlers, I have no clue what that even means, I am a total noob at javascript/jQuery. All I need to do is this:

onclick, fadeout the div openc (which yes, is a number) ,fadein openc +1, and update openc to its own value +1.

This is for a pagination of sorts between divs. So say you land on div id=0, openc=0. You click on next, it should fadeout div0, fadein div1, and openc should now equal1. That way, the next time you click next, div1 fades out, and div2 appears, etc.

Hope that clarifies, thanks again!

i think the complete code example would help, maybe use jsfiddle.net ? — Hannes
– Hannes, Commented Jan 13, 2012 at 16:12
If you're using jQuery, why are you using the onclick attribute of an element to assign a click event handler? Also, the W3C standards state that IDs must begin with a letter ([a-zA-Z]). — Anthony Grist
– Anthony Grist, Commented Jan 13, 2012 at 16:14
In addition to that, it's += rather than =+ to perform addition and assignment using the single operator. The code is very difficult to read in its current state, but I did spot that. — Anthony Grist
– Anthony Grist, Commented Jan 13, 2012 at 16:15
Anthony, thank you, you're the only one who actually answered my question rather than tell me what's wrong with my code. I am aware that it is horrible to read, and deprecated and what-have-you, I suck at javascript/jQuery, and the fact that I can't even make a simple addition should tell a lot on the fact that I have no clue what's good practice or not lol! I'll try this Anthony, thx again. — Sherif
– Sherif, Commented Jan 13, 2012 at 16:17

Rory McCrossan · Accepted Answer · 2012-01-13 16:21:45Z

1

You should put this code in to an event handler, rather than use the outdated onclick HTML attribute. Try putting this in to the <head> of your page:

<script type="text/javascript">
    $(function() {
        $j("#myElement").click(function() {
            $j('#' + openc).fadeOut('normal', function() {
                $j('#' + openc).fadeIn('slow')
            });

            openc += 1;

            alert('The city of ' + openc + ' is located in ' + openc + '.');
        });
    });
</script>

Also, as stated in the comments Ids cannot start with numbers, so it'd be best to change those too.

edited Jan 13, 2012 at 16:21

answered Jan 13, 2012 at 16:14

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ThiefMaster Over a year ago

+1 - you answer would've been even nicer if you had wrapped it with (function($){ ... })($j); to use $ insisde. ;)

Rory McCrossan Over a year ago

@ThiefMaster Oh man, I always forget to add something in my answers lately! Thanks.

Sherif Over a year ago

I'd love to give this a try, but I honestly have no clue what I'd have to change to make this work. Besides, I would much rather not have to put anything in the head of the site, this code needs to work only on one page and I'm worried it might cause conflict with other scripts on the rest of the site. Can you kindly simply tell me how to do it with my onclick function, it'd be much appreciated!

Rory McCrossan Over a year ago

I'm not sure it's possible to have code which is that involved in the onclick attribute. Normally it's for specifying a function name to be executed.

Diodeus - James MacFarlane · Accepted Answer · 2012-01-13 16:16:05Z

0

openc=+1 makes it look line "openc" is a number. IDs cannot be numbers.

answered Jan 13, 2012 at 16:16

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

5 Comments

Sherif Over a year ago

openc is indeed a number, so are the divs. Why can't it be numbers?

Diodeus - James MacFarlane Over a year ago

Because the w3c spec says so.

Sherif Over a year ago

How else do you suggest I make a Prev/Next nav based on preloaded divs, allhidden, not knowing how many I'll have in advance? I appreciate your answer but my question is not "how can I make my page w3c compliant", it is simply how can I update the value of my openc var to its own value +1 , on click ;)

Diodeus - James MacFarlane Over a year ago

You count them using $('#myDIV').length and navigate them using relative selectors like .next()

Sherif Over a year ago

That sounds like the perfect solution, but as I mentionned in my post, I have no clue what I'm doing here..I realize I'm asking for a cheap solution, but javascript is not my field, at all, and I cannot invest in learning it for such a small task, which, other than the w3c compliance, works fine! I'd really appreciate if you could simply let me know how to update the openc var, onclick, I'd be much obliged!

Collectives™ on Stack Overflow

Jquery onclick var update

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related