can I make an <h1> tag as a clickable button that functions?

user_14546635 0
Viewed 1732

The web page I am making consists of

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

enter image description here

on top centre of the web and autoplay going on the background using JS.

I have successfully hid the play button using style="display:none;" but shortly after realized I can't turn the music off. how do I make <div><h1> as a clickable button so that I can turn on/off the music?

after some googling I found some sources that turn div into buttons but can <h1> be a button as well ?

audio css html javascript
3 Answers

Yes you can make an h1 element clickable by all means. I'm doing that in the snippet below. You'll just have to add a click event listener to the element in order to achieve that:

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>

user_143863320

Yes, of course you can use this tag like a button. If your button will work as a counter - on/off, then I advise you to use the toggleAttribute() method inside the click event, with which you can control the attribute of the music playback activity.

I have provided a code that you can use.

Instead of a selector - you need to specify a class, id or tag that plays the music.

And instead of the 'attribute' - the name of the attribute responsible for the state of the music playback activity.

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

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

You can easily do it by using jQuery. You can do it like this:

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

and then write some codeto create its click function

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

If you are using vanilla js then use eventListerner to listen to the click event for your h1 tag.

user_129573060
Related