Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Button onclick make other script stop running

i am having below code:

$(function() {
    $("#buttonID").click( function() {
        // stop funcName() running
    });
});

$(function funcName(){
    // some scripts will run on page load
});

My question is how can i stop funcName() running when click at #buttonID.

Thank you guys.

EDIT: This is the script that will run on page load: https://jsfiddle.net/1t8z3Ls2/1/ (i found this script on Google. this script will make a div child become sticky to it's parent div.)

I want to make this script stop runnig by clicking on a button.

Thanks again.

like image 961
Thuat Nguyen Avatar asked Jan 22 '26 18:01

Thuat Nguyen


1 Answers

In the following code:
- You have one red div
- You have one button
- In the CSS you have one animation declared but not used
- When page is loaded, the first JS block code will be automatically executed, this block of code will assign animation 'moveRight' to div 'player'
- The animation will make the player div move to the right for one second
- If user click on the button 'Stop Animation', the function stopMoving() will be executed to stop the player div from moving
Good luck!

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <style>
    #player {
      min-width: 80px;
      min-height: 80px;
      background-color: red;
      position: absolute;
      top: 10%;
      left: 0%;
    }
    
    @keyframes moveRight {
      0% {
        top: 10%;
        left: 0%;
      }
      20% {
        top: 10%;
        left: 20%;
      }
      40% {
        top: 10%;
        left: 40%;
      }
      60% {
        top: 10%;
        left: 60%;
      }
      80% {
        top: 10%;
        left: 80%;
      }
      100% {
        top: 10%;
        left: 100%;
      }
    }
  </style>
  <button onclick="stopMoving()">Stop Animation</button>
  <div id="player"></div>

  <script>
    //This code will be executed on page load.
    //It will give the div 'player' an animation to make it move to the right
    let player = document.getElementById("player");
    player.style.animationName = "moveRight";
    player.style.animationDuration = "60s";
    player.style.animationFillMode = "forwards";



    function stopMoving() {
      //This function will be executed when user click on the button.
      //This function will stop the div from moving to the right                
      player.style.animationName = "";
    }
  </script>
</body>

</html>
like image 52
Hamza Dahmoun Avatar answered Jan 24 '26 10:01

Hamza Dahmoun