Question

我想在 PLAY/PAUSE lib上添加 responsive-voice.js 按钮。单击PLAY并在PAUSE上更改按钮标签后将开始读取当我再次单击此按钮时，它当然会暂停并更改RESUME上的标签。点击RESUME后，它将继续阅读 PHP 中的文字。现在我的剧本没有用。

<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");

在这一行上，你正在改变元素的onclick属性来说话功能。因此，下次单击按钮时，它将执行此说话功能。

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

这一行也在做同样的事情（更改onclick属性）。

相反，您想要做的就是调用这样的函数。因此，每次单击时，只更改了元素的value属性，而不是onclick属性。

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;
}

您想在MDN上阅读有关events和addEventListener method的更多信息。

修改

显然你错过了html中id属性值（即playound）的引号。这就是为什么没有选择元素的原因。

Answer 2

希望可以帮到你。

这是一个简短的方法，我认为可以帮助你“标记”以检查你的应用程序的当前状态。

基本HTML

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

相对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
                            }

如何使用JS切换onclick按钮功能

2 个答案: