how do I display a variable w/ jquery? - html

Question

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>

Answer 1

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;