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>

Answer 1

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(ie playsound) in html. That's why no element was selected.

Answer 2

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
                            }