getting updated variable value from function jquery

Question

I made this as simple as I could

Here is my HTML code:

    <div id="outsideCounter"><p></p></div>

    <div id="clickToAdd"><p>Click me</p></div>

    <div id="insideCounter"><p></p></div>

And here is the javascript:

$(document).ready(function(){

    var level = 1; // start the counting at 1

    $('#outsideCounter > p').html(level); // show value of the first counter


        $('#clickToAdd').click(function(){ 

            level++; // I want this to add both counters, not just the insideCounter

            $('#insideCounter > p').html(level); // show value of the second counter
        });

});

Now the problem is that when you click 'clickToAdd' it adds 1 only to the insideCounter. How could I get that same updated level to the outsideCounter? I've been struggling with this for hours now and my brains are so jammed I can't figure this out on my own.

I have been exercising javascript only for a week now so please try to keep it as simple as possible because I couldn't even find anything useful from the previous answers about 'getting variable from function'.

I made jsfiddle if that helps to understand my problem.

Amit Joki · Accepted Answer · 2015-02-12 14:14:34Z

4

You can separate the selectors by a comma , but since both ids end with Counter, you could just make use of that pattern, by combining ends-with which works with attribute selector.

$('[id$=Counter] > p').html(level);

edited Feb 12, 2015 at 14:14

answered Feb 12, 2015 at 14:07

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

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

1 Comment

kasper Taeymans Over a year ago

this will remove the <p> tags!

Andy · Accepted Answer · 2015-02-12 14:06:47Z

2

Simply add outsideCounter > p to your selector:

$('#insideCounter > p, #outsideCounter > p').html(level);

Fiddle

answered Feb 12, 2015 at 14:06

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

Legionar · Accepted Answer · 2015-02-12 14:06:36Z

1

$(document).ready(function(){

    var level = 1; // start the counting at 1

    $('#outsideCounter > p').html(level); // show value of the first counter


        $('#clickToAdd').click(function(){ 

            level++; // I want this to add both counters, not just the insideCounter 

            $('#insideCounter > p, #outsideCounter > p').html(level); // show value of the second counter
        });

});

answered Feb 12, 2015 at 14:06

Legionar

7,5993 gold badges45 silver badges71 bronze badges

Comments

Rahul Soni · Accepted Answer · 2015-02-12 14:17:46Z

0

$(document).ready(function () {

var level = 1; // same variable for both counter

$('#outsideCounter > p').html(level); // show first counter

$('#clickToAdd').click(function () {
    level++; // this only adds insideCounter
    $('#insideCounter > p, #outsideCounter > p').html(level);
  }); 
});

answered Feb 12, 2015 at 14:17

Rahul Soni

4,9683 gold badges39 silver badges58 bronze badges

Collectives™ on Stack Overflow

getting updated variable value from function jquery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related