Question

I have some content in the numbers div. When I click numbers-clicker, the content of numbers 123456789 is saved to the oldNumbers variable, the content is changed to 987654321, and the class opened is toggled on the numbers div. When I click numbers-clicker again, I am trying to restore the original oldNumbers, so 123456789 to the numbers div, instead, the oldNumbers is overwritten with the 987654321. How can we make sure the oldNumbers stays as the beginning content of the numbers div, 123456789?

<div id="numbers-clicker">Clicker</div>
<div id="numbers">123456789</div>

$('#numbers-clicker').off('click').on('click',function(){
    $this = $(this);
    var oldNumbers = $('#numbers').html();

    if(!$this.is('.opened')){ 
        $('#numbers').html('987654321'); 
    } else { 
        $('#numbers').html(oldNumbers); 
    }
    $this.toggleClass('opened')
});

Here is a fiddle

Answer 1

You need to declare oldNumbers outside of your callback:

var oldNumbers = $('#numbers').html();
$('#numbers-clicker').off(...);

Cheers