CODEWITHSUNDEEP
htmljquery
aslum
aslum

Reputation: 12254

how do I display a variable w/ jquery?

This is a fairly newbish question, so apologies in advance. I want the scrolltimes variable to update each time the user scrolls the page. I've tried a half dozen different ways and can't quite figure out how to make the variable show up. I've managed it w/ append/prepend, but that doesn't remove the old version... do I need to remove the previous version and add in the new one each time or is there a way I can display the <p>Scrolled: N</p> substituting the value of scrolltimes for N?

Script:

var scrolltimes = 0;
$(document).ready(function() {
$('#clay').scroll(function() {
$('#scrollamount p')
.html({'<p>Scrolled: '+ .scrolltimes++ + '</p>'});
});

html:

<div id="clay" style="height:100px; overflow:scroll;">
<div id="scrollamount">
<p>Scrolled: 0</p>
</div>
<p>Pretend there is lots of content here</p>
</div>

Upvotes: 0

Views: 9270

Answers (1)

ttubrian
ttubrian

Reputation: 642

You have a few syntax errors in your script. Try this:

var scrolltimes = 0;
$(document).ready(function() {
    $('#clay').scroll(function() {
        $('#scrollamount p').html('<p>Scrolled: '+ ++scrolltimes + '</p>');
    });
});

The errors were:

  • Closed the scroll event function, but not the ready function - I added a }); to the end
  • Unnecessary dot at the beginning of the scrolltimes variable - I removed the .
  • Don't need to put the argument to the html call in an object - I removed the { and }

In addition to that, in order to make your output correct, I moved the increment on the scrolltimes variable from post-increment to pre-increment. Thay way the variable gets incremented before it is shown and now the first scroll event shows 1 instead of 0. The same thing could have been achieved by initializing var scrolltimes = 1;

Upvotes: 4

Related Questions