[Resolved] Need help adding onclick event to a button

[John]

I want to add a button to my page that, when clicked, plays a small sound file from my media library. I also want the button to behave like a button, with hover and click behaviors. I added the GenerateBlocks button block, and it looks fine, but I can’t seem to add the onclick event to it. (I want to add an onclick event that calls a small function in my footer that plays the file.) When I add the code using the code editor view, I get a “This block contains unexpected or invalid content” error. Can you let me know what I’m doing wrong or tell me the correct way to do this with GP? Thanks.

Button code:

<!-- wp:generateblocks/button {"uniqueId":"4a6c6a58","hasUrl":false,"backgroundColor":"#0366d6","textColor":"#ffffff","backgroundColorHover":"#222222","textColorHover":"#ffffff","paddingTop":"15","paddingRight":"20","paddingBottom":"15","paddingLeft":"20"} -->
<span class="gb-button gb-button-4a6c6a58 gb-button-text" onclick="playAudio('http://dev.mysite.com/wp-content/uploads/2021/02/Unison.ogg')">Button</span>
<!-- /wp:generateblocks/button -->

Script in wp_footer hook:

<script type="application/javascript">
function playAudio(url) {
  new Audio(url).play();
}
</script>

[John]

I figured out a workaround so, for anyone else searching for this same issue, this is what I did: Instead of adding a Button block, I added a Custom HTML block and then added this code:

<button type="button" onclick="playAudio('http://dev.mysite.com/wp-content/uploads/2021/02/Unison.ogg')">Button</button>

This worked like a charm.

[Elvin]

Nice one. Glad you got it sorted. Thank you for sharing it with us. 🙂

Tip: Alternative to custom CSS, if you wanna stick with GB button, you can write a vanilla JS click listener script for it.

First, add a unique class to the GB button: Example – play-btn.

<script type="application/javascript">
function playAudio(url) {
  new Audio(url).play();
}

const playbtn = document.querySelector('.play-btn');
playbtn.addEventListener("click", function() {
  var url = 'http://dev.mysite.com/wp-content/uploads/2021/02/Unison.ogg';
  playAudio(url);
});
</script>

[John]

That’s good to know–thanks!

[Elvin]

No problem. Glad to be of any help. 😀

[Reza]

Hi Elvin,

I saw your solution here and it is what I am looking for to add an onclick event to a button.
My function is to hide and show social share buttons

<script>
	
function myBtnFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

I am having trouble adding the onclick event to a GenerateBlocks button, all styling gets ignored and I have no idea how to add an icon using the HTML code block. Can you elaborate a little on the code you suggested? Thanks

[Elvin]

Hi Reza,

Can you open a new topic for that? What you’re asking seems different and this is resolved for the topic starter.

Opening a new topic lets you use the private information text field. It’ll help incase we need to ask for the site details.

Let us know. Thank you.

[afuente26]

The solution from John works very fine. But is there any way to stop the audio by clicking a second time?

[David]

Hi there,

this stackoverflow provides a good soltuion.
You would add the audio file to the page first ( using a HTML block ) then you can play / pause it with the same button.

https://stackoverflow.com/a/38665865

[afuente26]

thanks david 😉

[David]

You’re welcome

[Author]

Posts