Running function on button click

dixon3al
(@dixon3al)

4 years, 9 months ago
Hello,

I’ve created a function that I’d like to run when a user clicks on a button. I’ve created the button using the Word Press editor. I’ve added an id to the button in hopes that I could use an event lister (js) to run a function when the button is clicked. Here is the HTML:

<div class=”wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-huge-font-size” id=”tester”>Push Me! </div>

For intermediate testing, instead of running my function, I wrote some simple code just to change the color of the button to check if I get any response from the button. I followed the format from another similar thread. Here is my code:

add_action( ‘wp_head’, function() { ?>
<script>

document.getElementById(‘tester’).addEventListener( ‘click’, function () {
document.getElementById(“tester”).style.color = “blue”;
} );

</script>
<?php
});

Nothing is happening when I click the button. I’m not sure what I’m missing. I don’t know if running getElementById checks all the pages on my site for the id but it seems like my button isn’t properly linked to my code.
Any insight you might have would be very helpful. Thanks!
- This topic was modified 4 years, 9 months ago by dixon3al.

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author Shea Bunge
(@bungeshea)

4 years, 9 months ago

Adding DOM manipulation JavaScript code to the page head is a little tricky, as it can sometimes be evaluated before the necessary elements exist on the page.

Try changing wp_head to wp_footer in your snippet code and see if that makes a difference.

Thread Starter dixon3al
(@dixon3al)

4 years, 9 months ago

Hi Shea,
It didn’t seem to make any difference. I’m trying to get my front-end functionality working before publishing my site. So my site is currently unpublished, although I don’t think that would make my difference. Any other suggestions you might have would be greatly appreciated. Thanks.
Thread Starter dixon3al
(@dixon3al)

4 years, 8 months ago
Here is the full HTML of the button:

<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-huge-font-size" id="tester"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" style="border-radius:100px"><strong>Push Me!</strong> </a></div>
- This reply was modified 4 years, 8 months ago by dixon3al.
- This reply was modified 4 years, 8 months ago by dixon3al.
- This reply was modified 4 years, 8 months ago by dixon3al.
- This reply was modified 4 years, 8 months ago by dixon3al.
Plugin Author Shea Bunge
(@bungeshea)

4 years, 8 months ago
The element with an ID of tester is a div, not a button, in the example you give. You probably want something more like this:
```
add_action( 'wp_footer', function () { ?>
    <script>

    document.addEventListener('DOMContentLoaded', () => {

        const button = document.querySelector('#tester a');

        button.addEventListener('click', () => {
            button.style.color = 'blue';
        });
    }

    </script>
    <?php
} );
```

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Running function on button click’ is closed to new replies.