How to switch onclick button function using JS

Question

I would like to make a PLAY/PAUSE button to responsive-voice.js lib. It will start reading after clicking PLAY and change button label on PAUSE When again I will click this button it will of course pause and change the label on RESUME. After click RESUME it will continue reading the text from PHP. Right now my script not working.

<input id=playsound; onclick='changeState("<?php echo $step[' description ']; ?>");' type='button' value='PLAY' />


                            <script>
                                function changeState(tekst) {

                                    var buttonvalue = document.getElementById('playsound').value;
                                    switch (buttonvalue) {
                                        case "PLAY":
                                            document.getElementById('playsound').value = "PAUSE";
                                            document.getElementById('playsound').onclick = responsiveVoice.speak(tekst, "Polish Female");
                                            break;

                                        case "PAUSE":
                                            document.getElementById('playsound').value = "PLAY";
                                            document.getElementById('playsound').onclick = responsiveVoice.pause();
                                            break;

                                    }
                                }

                            </script>

sometimes it is helpful to post the HTML (or whatever markup is used) as well as the script — JosephDoggie
– JosephDoggie, Commented Mar 14, 2018 at 18:19
Possible duplicate of Change onclick action with a Javascript function — Aashish Kumar
– Aashish Kumar, Commented Mar 14, 2018 at 18:21

Alfredo Lanzetta · Accepted Answer · 2018-03-14 19:07:06Z

0

hope can help you.

This is a short-way to do that and i think can help you some 'flag' to check the current state of your application.

Basic HTML

<input id="playsound" onclick='changeState()' type='button' value='PLAY' />

Relative JS

var states = ["PLAY","PAUSE"], // your possible states
                        current_state = 0; // your flag

                            function changeState() {
                              current_state=!current_state; // switch
                              document.getElementById('playsound').value=states[current_state?1:0]; // write your state
                            }

answered Mar 14, 2018 at 19:07

Alfredo Lanzetta

3124 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krunal-Gadhiya · Accepted Answer · 2018-03-14 19:29:36Z

document.getElementById('playsound').onclick = responsiveVoice.speak(tekst, "Polish Female");

On this line you are changing element's onclick property to speak function. So next time you will click the button it will execute this speak function.

document.getElementById('playsound').onclick = responsiveVoice.pause();

This line is also doing the same thing (changing onclick property).

Instead what you would like to do is call the functions like this. So every time you click just just the value property of element is changed and not onclick property.

switch (buttonvalue) {
   case "PLAY":
      document.getElementById('playsound').value = "PAUSE";
      responsiveVoice.speak(tekst, "Polish Female"); // call speak function
      break;

   case "PAUSE":
      document.getElementById('playsound').value = "PLAY";
      responsiveVoice.pause(); // call pause function
      break;
}

You would like to read more about events and addEventListener method on MDN.

Edit

Apparently you missed some quotes around id attribute's value(i.e. playsound) in html. That's why no element was selected.

Collectives™ on Stack Overflow

How to switch onclick button function using JS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related