Как пофиксить двойной клик в данном недоскрипте?

Question

[Ильнар Камалетдинов]

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

<div id="toggle_music"  style="border-radius: 50px;background: #000; padding:10px;text-align: center; color:#fff; width:5%;cursor: pointer;">Кнопачка</div>

<audio id="music" class="">
<source src="assets/music_array/xxx.mp3" type="audio/mp3">
</audio>

собственно клас прописывается, музыка вопроизводится, при повторном нажатии музыка выключается, но чтобы повторно вопроизвести музыку нужно кликнуть по кнопке 2 раза, 2 раза прописывается класс off в тег audio, и только потом класс on

var music = document.getElementById('music'); 
			music.volume = 0.1;
			$('#toggle_music').click(function(event){ //пока нет никакого класса в теге audio, при клике на кнопочку добавляется класс on в тег audio, музыку включаем
				$('#music').addClass('on');
				music.play();
				
				if ($('#music').hasClass('on')) { //если нашли класс on то удаляем его и добавляем класс off, музыку гасим
					$('#toggle_music').click(function(event){
						$('#music').removeClass('on');
						$('#music').addClass('off');
						music.pause();
					});
				}
				if ($('#music').hasClass('off')){
					$('#toggle_music').click(function(event) {//если нашли класс off то удаляем его и добавляем класс on, музыку включаем
						$('#music').removeClass('off');
						$('#music').addClass('on');
						music.play();
					});
				}
			});

Answer 1

[Никита Егоров]

Код пока не проверял

const music = document.getElementById('music');
music.volume = 0.1

music.addEventListener('click', () => {
   music.classList.toggle('active')

    if (music.className.indexOf('active') === -1)
         music.pause()
    else
         music.play()
})

Ошибка у вас в том, что когда вы кликаете вы не проверяете класс. Проверка класса вне обработчика события. Вы сначала проверяете, затем инициализируете обработчик.

Comments

[Ильнар Камалетдинов]

На счет знаний JQuery, я его и сам не знаю толком!)
Спасибо за ответ, проверим.

[Ильнар Камалетдинов]

Да, действительно, все заработало!

Только пришлось добавить еще одну переменную, переменную кнопки.

const music = document.getElementById('music'); 
			music.volume = 0.1;
			const toggle_btn = document.getElementById('toggle_music')
			


			toggle_btn.addEventListener('click', () => {
				music.classList.toggle('active')

   			if (music.className.indexOf('active') === -1)
         		music.pause()
    			else
         		music.play()
			})

Спасибо большое!

[Никита Егоров]

Ильнар Камалетдинов, :) Отметите решением ?

[Ильнар Камалетдинов]

Никита Егоров, отметил ;)