Почему я должен дважды нажать кнопки для воспроизведения звука? - PullRequest
Новая
       13

Почему я должен дважды нажать кнопки для воспроизведения звука?

0 голосов
/ 01 октября 2019

Я сделал простую программу с несколькими кнопками. Когда пользователь нажимает кнопку, он должен услышать соответствующий звук.

При первом нажатии любой кнопки. Кнопка должна быть нажата дважды, чтобы услышать звук. Каждый раз после этого нажатие кнопки будет работать только один раз.

У меня нет опыта работы с jquery или javascript. По большей части, скопировал и вставил различные примеры, которые я нашел в Интернете, чтобы получить то, что у меня есть сейчас. 

<style>
    p.hideme {display: none;}
</style>

<input type="button" class="btn btn-info" id="3" value="Sound 3" onclick=" play_sound3()">

<p class="hideme">
    <audio controls id="linkAudio3">
        <source src="sounds/sound3.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
 </p>

<script>
    function play_sound3()
    {
        document.getElementById("3").addEventListener("click", function () {
        document.getElementById("linkAudio3").play();
  });
} 
</script>

Ожидаемое поведение - при нажатии кнопки должен воспроизводиться звук.

На самом деле происходит следующее: при первом нажатии любой кнопки необходимо дважды нажать кнопку, чтобы воспроизвести звук

После этого программа работает, как и ожидалось.

1 Ответ

1 голос
/ 01 октября 2019

У вас есть два обработчика событий;один на вашей кнопке: 

<input type="button" class="btn btn-info" id="3" value="Sound 3" onclick=" play_sound3()">

и один в вашей функции, который вызывает кнопка: 

document.getElementById("3").addEventListener("click", function ()

Мало того, что это будет неоднократно добавлять несколько обработчиков событий каждый раз, когда вы нажимаете на кнопку, этопричина, по которой у вас возникает проблема двойного щелчка.

Я бы порекомендовал удалить встроенный обработчик событий и просто создать отдельный обработчик событий, размещенный в конце вашего документа, например: 

<script>
document.getElementById("3").addEventListener("click", function () {
    document.getElementById("linkAudio3").play();
} 
</script>

*Также избегайте использования числовых идентификаторов ...

...