Блог

Веб-страница, которую я создаю, состоит из

 <div class="cane-wrap">
        <h1 class="mc">christmas tic tac toe</h1>
</div>
    
 

в верхней части веб-страницы и автозапуск в фоновом режиме с использованием JS.

Я успешно скрыл кнопку воспроизведения, используя style="display:none;" , но вскоре понял, что не могу выключить музыку. как мне сделать <div><h1> интерактивную кнопку, чтобы я мог включать / выключать музыку?

после некоторого поиска в Google я нашел несколько источников, которые превращают div в кнопки, но могут <h1> быть и кнопкой?

Да, вы можете сделать h1 элемент интерактивным любыми способами. Я делаю это во фрагменте ниже. Вам просто нужно добавить прослушиватель событий щелчка к элементу, чтобы добиться этого:

 document.querySelector('.mc').addEventListener('click', function(){
console.log('h1 has been clicked');
}); 

 .mc:active{
transform: scale(1, 0.9);
color:#2d3436;
transition: transform 0.2s color 0.2s;
} 

 <h1 class="mc" >This is a header</h1> 

Да, конечно, вы можете использовать этот тег как кнопку. Если ваша кнопка будет работать как счетчик on/off , то я советую вам использовать toggleAttribute() метод внутри события click , с помощью которого вы можете управлять атрибутом активности воспроизведения музыки.

Я предоставил код, который вы можете использовать.

Вместо a selector — вам нужно указать a class , id или tag , который воспроизводит музыку.

И вместо 'attribute' — имя атрибута, отвечающего за состояние активности воспроизведения музыки.

 let on_off = document.querySelector('.cane-wrap .mc');

on_off.onclick = function() {
  selector.toggleAttribute('attribute');
}
 

Вы можете легко сделать это с помощью jQuery . Вы можете сделать это следующим образом:

     <div class="cane-wrap">
          <h1 class="mc" id = "myID">christmas tic tac toe</h1>
    </div>
 

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

  $("#myID").on("click", function(){
       //do something here ...
 })
 

Если вы используете ванильный js, используйте eventListerner для прослушивания события click для вашего тега h1.