Changing a javascript variable inside a DIV using JQuery

Question

Firstly - i'm not even sure if the syntax is correct, but what i'm trying to do is, i have a div showing an animated image sequence which picks a position using a variable.

I will eventually use JSON to feed the value being changed, but for now i'm just trying to understand how to use JQuery to change the variable. Here's the code:

<div id="noiseAnimDiv" style="float: center; background-color: #ffffff; ">
<script type="text/javascript" src="./animatedpng.js">
 </script>
<script type="text/javascript">
var stoptheClock = 3;
    noiseAnim = new AnimatedPNG('noise', './noise/noise0.png', 8, 50);
    noiseAnim.draw(false);
    noiseAnim.setFrameDelay(stoptheClock, 1000); //spin yet stay on value 3
 </script>
</div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(
function() {
    $("#stoptheClock").val(6); //
 }
);
</script>

Any help much appreciated

code is live btw at so you can at least see the animation seq http://ashleyjamesbrown.com/fgbp/noise.htm

Answer 1

The AnimatedPNG library you are using only checks the variable's value once - when initialized. in your code, you are changing the value after initializing it.

$(document).ready(
function() {
    $("#stoptheClock").val(6); //
}
);

Should be

function() {
    stoptheClock = 6; 
    noiseAnim.draw(false);
    noiseAnim.setFrameDelay(stoptheClock,1000);
}

You are not using JQuery for any useful cause in your code, therefore I have removed all of the Jquery parts.