How to make one button to work twice ??🤔🤔

Question

I have a box which moves after I tap the stop button it stops. Next a start again I have also made which moves the box to where it started .Now I want to use the same stop button again to stop the box 🤔🤔

Answer 1

I will give it but by mistake I deleted it so I will make another one then I will post it

Answer 2

you didn't understand
I have three buttons:- 1. tap to move 2.stop and 3. start again
when I click on tap to move the box starts moving
after when I click stop the box stops as I want
if I tap on start again it starts from the pt. it stopped.
I want to use the same stop button to stop the box after tapping on start again to stop the box.

Answer 3

Why all these JQuery specific javascript code, when question doesn't talk about it?

@Nikhil:

Show us your code, as we can provide you convenient solution adapted to your specific case ;)

Answer 4

<button type = 'button' onclick = 'clickMe()'>Buttontext</button>

var timesclicked = 0;
function clickMe(){
timesClicked++;
switch(timesClicked){
case 1: break;
case 2: break
//more cases for logic for more clicks
}
}

Voilà

Answer 5

make a variable to know if your button will have to stop the box or to move it like :
var boxMoving = false;
$("#button").click(function(){
if (boxMoving) { command the movement of your box here }
else { command the box to stop here }
});

Answer 6

document.createElement()

Answer 7

than add to my code 2 other variable : the position and the direction it should be like this but I didn't test it so I can't say that it will work
var boxMoving = false;
var dir="right";
$("#button").click(function(){
if (boxMoving==false) {
if(dir=="right"){
$("#box").animate({left:"500px"}, "slow");
}
else{
$("#box").animate({left:"0px"}, "slow");
}
boxMoving = true;
}
else {
var posX = $("#box").attr("left");
if(posX == 0 || posX == "0px"){
$("#box").animate({left:"500px"}, "slow");
dir = "right";
}
if(posX == 500 || posX == "500px"){
$("#box").animate({left:"0px"}, "slow");
dir = "left";
}
else{
$("#box").stop();
boxMoving = false;
}
}
});