Onclick changes button's name & function

Question

I've been searching the forum for answers, but I'm still stuck.

I have a button created with an onclick attribute pointing to stopRotation() function as such.

<button type="button" class="changeText" onclick="stopRotation();">Stop Rotation</button>

Upon clicking on it, the following will happen:

1. The globe in the application stops rotating (successful)
2. The text on the button changes from 'Stop Rotation' to 'Start Rotation' (successful)

This is achieved by the following lines of codes:

$(".changeText").click(function () {
    $(this).text(function(i, v){
        return v === 'Start Rotation' ? 'Stop Rotation' : 'Start Rotation'
    })
});

var lastNow = Date.now();

function rotation(clock){
    if(scene.mode == Cesium.SceneMode.SCENE3D){
        var now = Date.now();
        var spinRate = 0.08;
        var delta = (now - lastNow) / 1000;
        lastNow = now;
        scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
    }
}    

function stopRotation(){
    viewer.clock.onTick.removeEventListener(rotation);
}

Now that the button's text is set to 'Start Rotation', how do I call the function so that the globe starts rotating again after the user clicks on the button?

function startRotation(){
    viewer.clock.onTick.addEventListener(rotation);
}

Thank you in advance.

Alan

Answer 1

Since you're calling both the click listener and the function, I'd remove the onclick call and move all logic to your click listener.

$(".changeText").click(function () {
    $(this).text(function(i, v){
        if (v === 'Start Rotation')
           viewer.clock.onTick.addEventListener(rotation);
        else 
           viewer.clock.onTick.removeEventListener(rotation);

        return v === 'Start Rotation' ? 'Stop Rotation' : 'Start Rotation'
    })
});

var lastNow = Date.now();

function rotation(clock){
    if(scene.mode == Cesium.SceneMode.SCENE3D){
        var now = Date.now();
        var spinRate = 0.08;
        var delta = (now - lastNow) / 1000;
        lastNow = now;
        scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
    }
}    

Answer 2

Instead of calling the methods directly use ToggleRotation.

 function toggleRotation() { var txt = $(".changeText").text(); if (txt == "Start Rotation") startRotation(); else stopRotation(); } 

 <button type="button" class="changeText" onclick="ToggleRotation();">Stop Rotation</button> 

Answer 3

$(".changeText").click(function () {
    $(this).text(function(i, v){
        if (v === 'Start Rotation'){
            startRotation();
            return 'Stop Rotation';
        }
        return 'Start Rotation';
    });
});