SetInterval and clearInterval issues

Question

I'm having trouble with this, my code is (simplified):

$(document).ready(function() {

  var theta = 0;

  carouselNext = function() {
    theta += 1;
  }

  var carouselInterval = window.setInterval(carouselNext, 1000);
  var spinning = true;

  $("#stopstart").click.function() {
    if (spinning) {
      clearInterval(carouselInterval);
      spinning = false;
    } else {
      carouselInterval = setInterval(carouselNext, CAROUSEL_DURATION);
      spinning = true;
    }
  }

EDIT: here is the full version of my code

    var CAROUSEL_DURATION = 5000;
    var html = '';
    $(document).ready(function(){
        $.getJSON("/static/js/users.json", function(data){
            $.each(data, function(index, student){
                html += '<div class="student">';

                html += '<h2>' + student.level + ' of the Month</h2>';

                html += '<h4>' + student.firstname + ' ' + student.lastname + '</h4>';

                html += '<p>' + student.class + '</p></br>';

                html += '</div>';   
            });
            $('.students').html(html);

            $('.students').cycle({
                fx: 'fade',
                pause: '1',
                prev: '#prev',
                next: '#next',
                speed: '500',
                timeout: 10000
            });
        // catch JSON reading error
        }).fail( function(d, textStatus, error) {
            console.error("getJSON failed, status: " + textStatus + ", error: "+error)
        });
        $(".my-btn").click(function() {
            $('<li>').text("click").prependTo('.posts');

        });

        var carousel = document.getElementById('carousel');
        var navButtons = document.querySelectorAll('#navigation button');
        var panelCount = carousel.children.length;
        var transformProp = Modernizr.prefixed('transform');
        var theta = 0;

        $("#next").on('click', function() {
            theta += ( 360 / panelCount ) * -1;
            carousel.style[ transformProp ] = 'translateZ( -288px ) rotateY(' + theta + 'deg)';
        });


        carouselNext = function() {
            theta += ( 360 / panelCount ) * -1;
            carousel.style[ transformProp ] = 'translateZ( -288px ) rotateY(' + theta + 'deg)';
        }

        var carouselInterval = window.setInterval(carouselNext, CAROUSEL_DURATION);
        var spinning = true;

        // stop carousel spinning
        $("#stop-start").click(function() {
            if (spinning) {
                clearInterval(carouselInterval);
                spinning = false;
            } else {
                carouselInterval = setInterval(carouselNext, CAROUSEL_DURATION);
                spinning = true;
            }
        })

        // clicking on carousel navigation buttons
        onNavButtonClick = function( event ) {
            var increment = parseInt( event.target.getAttribute('data-increment') );
            theta += ( 360 / panelCount ) * increment * -1;
            carousel.style[ transformProp ] = 'translateZ( -288px ) rotateY(' + theta + 'deg)';
        };

        for (var i=0; i < 2; i++) {
            navButtons[i].addEventListener( 'click', onNavButtonClick, false);
        }

    });

When I load up the page, theta is ticking up 1 every second, as expected...

When I click the "stopstart" button, theta stops ticking up, as expected...

However, when I click "stopstart" again, theta returns NaN. I don't see why this should be the case. Any ideas where I'm going wrong?

Answer 1

Thanks to @gillesc for their helpful comment - #stop-stort was inside #navigation which caused onNavButtonClick to be fired at the same time as carouselNext, causing

increment = parseInt( event.target.getAttribute('data-increment') );

to fail and turning theta to become NaN.