Jump to content
Search Community

How can I enable and disable buttons with another button?

Elindo test
Moderator Tag

Go to solution Solved by nico fonseca,

Recommended Posts

Now, I didn't minimize the demo any smaller because everything is linked together

 

However, the items to add some functionality are these last buttons of the code:

btnstart.onclick = () => {
      animation = stagestart();
  }

btnstop.onclick = () => {
      if(animation)animation.kill();
      animation = stagestop();
  }

 

For the STOP button

I want it to kill the animation, and go to the stagestop animation (<-- this part is done)

And.. once you click the Stop button I want to disable button A and button B... meaning if you push A or B they won't work.  How do you go about to do these things about disabling other buttons?

 

For the START button

If nothing has been previously touched ... at the very begining of the animation it would play animation stagestart (that is in the code), PLUS enable buttons A and B so they can now be functional.

If the STOP button has been pressed, then It would kill animation for button STOP, play animation stagestrat and enable buttons A and B so they can now be functional again.

If A or B are playing, then nothing would happen.

 

Buttons A and B would be normally disabled.

 

To play the proper line I suppose I can do something like:

if (functionx) function.play ();

if (functionx) funtion.kill ();

animation = startstage

^^ that is likely wrong..

 

But how do you go about to enable and disable buttons? 

 

 

 

 

 

 

 

See the Pen vYZLjJz by Elindo586 (@Elindo586) on CodePen

Link to comment
Share on other sites

I think I can digest that..

 

How do you set the button to be normally disabled?

 

Can you do something like.. ??

gsap.set ("#A, #B", {disabled:true}); 

 

Just to make some notes when I get back.

 

you created a 

let disabled = false;

 

then a click eventlistener for each button and gave it a name.

 

 Then a function to call out the event listener to do an If / else task.

 

Maybe later I can try something like..

 

let disabled = false;

btnstop.onclick = () => {
      if(animation)animation.kill();
      animation = stagestop();
  btna.disabled = true;
  btnb.disabled = true;
  }
btnstart.onclick = () => {
      animation = stagestart();
  btna.disabled = false;
  btnb.disabled = false;
  }

 

 

Link to comment
Share on other sites

20 minutes ago, Elindo said:

Can you do something like.. ??

gsap.set ("#A, #B", {disabled:true}); 

 


No. There are only 2 ways to disable/enable a button.

 

// to enable
button2.setAttribute("disabled", "");
button3.disabled = true;

// to disable
button2.removeAttribute("disabled");
button3.disabled = false;

 

 

  • Like 3
Link to comment
Share on other sites

let disabled = false;

btna.setAttribute("disabled", "");
btnb.setAttribute("disabled", "");

btnstop.onclick = () => {
      if(animation)animation.kill();
      animation = stagestop();
  btna.disabled = true;
  btnb.disabled = true;
  }

btnstart.onclick = () => {
      animation = stagestart();
    btna.disabled = false;
    btnb.disabled = false;
  }

 

So... what I am doing wrong? 

 

I am just creating a variable named disabled and giving it a false value..

 

then trying to set A and B as normally disabled..

 

Then expecting button A and B to work and not work when I say disabled is true or false when pushing the start or stop buttons. 

 

 

 

Link to comment
Share on other sites

You don't need this. I was showing 2 different ways.

btna.setAttribute("disabled", "");
btnb.setAttribute("disabled", "");

 

Just forget I showed the setAttribute/removeAttribute.

 

To disable a button.

button.disabled = true;

 

To enable a button.

button.disabled = false;

 

  • Like 2
Link to comment
Share on other sites

You have a new issue now because you can't use a html button inside of a svg, you need to use a foreignObject and then inside add your html button.
Or maybe you can add a little trick on your code to "emulate" a disabled state:
 

let isMyButtonDisabled = false;

const myAnimation = gsap.timeline({
 onComplete: ()=> isMyButtonDisabled = false;
});

mySvgElement.addEventListener('click', ()=> {
  if(isMyButtonDisabled) return;
  isMyButtonDisabled = true;
  myAnimation.play();
});

 

  • Like 1
Link to comment
Share on other sites

btna  and btnb are the links for buttons A and B... for whatever reason the buttons are not getting disabled.

 

I added:

let disabled = false;
gsap.set ("#A, #B", {disabled:true}); 

btnstop.onclick = () => {
      if(animation)animation.kill();
      animation = stagestop();
  btna.disabled = true;
  btnb.disabled = true;
  }

btnstart.onclick = () => {
      animation = stagestart();
    btna.disabled = false;
    btnb.disabled = false;
  }

 

Link to comment
Share on other sites

2 minutes ago, nico fonseca said:

You have a new issue now because you can't use a html button inside of a svg, ...
 

let isMyButtonDisabled = false;

const myAnimation = gsap.timeline({
 onComplete: ()=> isMyButtonDisabled = false;
});

mySvgElement.addEventListener('click', ()=> {
  if(isMyButtonDisabled) return;
  isMyButtonDisabled = true;
  myAnimation.play();
});

Thanks... I'll try that later on..

 

All my drawings are svg.  I am using the reference variable to link them to the svg object drawing.

 

The latest code I have is above..

 

I need some time to digest the code you are showing..

 

Thank you much..

 

 

 

Link to comment
Share on other sites

@nico fonseca

 

Thanks that worked!

 

How do you set the A and B buttons as normally disabled?

 

I see you created 2 variables, one for each button, and then added the variable with a value to the push button sections.

 

Why exactly is this line needed?

if(isButtonADisabled) return;

 

I added one variable for both buttons, and didn't do a line as the one you did above.... and of course it didn't work.

 

 

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...