Title: Running function on button click
Last modified: September 12, 2021

---

# Running function on button click

 *  [dixon3al](https://wordpress.org/support/users/dixon3al/)
 * (@dixon3al)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/running-function-on-button-click/)
 * 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](https://wordpress.org/support/users/dixon3al/).

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

 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/running-function-on-button-click/#post-14868870)
 * 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](https://wordpress.org/support/users/dixon3al/)
 * (@dixon3al)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/running-function-on-button-click/#post-14871191)
 * 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](https://wordpress.org/support/users/dixon3al/)
 * (@dixon3al)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/running-function-on-button-click/#post-14875447)
 * 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](https://wordpress.org/support/users/dixon3al/).
    -  This reply was modified 4 years, 8 months ago by [dixon3al](https://wordpress.org/support/users/dixon3al/).
    -  This reply was modified 4 years, 8 months ago by [dixon3al](https://wordpress.org/support/users/dixon3al/).
    -  This reply was modified 4 years, 8 months ago by [dixon3al](https://wordpress.org/support/users/dixon3al/).
 *  Plugin Author [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * (@bungeshea)
 * [4 years, 8 months ago](https://wordpress.org/support/topic/running-function-on-button-click/#post-14879232)
 * 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.

 * ![](https://ps.w.org/code-snippets/assets/icon.svg?rev=2148878)
 * [Code Snippets](https://wordpress.org/plugins/code-snippets/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/code-snippets/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/code-snippets/)
 * [Active Topics](https://wordpress.org/support/plugin/code-snippets/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/code-snippets/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/code-snippets/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [Shea Bunge](https://wordpress.org/support/users/bungeshea/)
 * Last activity: [4 years, 8 months ago](https://wordpress.org/support/topic/running-function-on-button-click/#post-14879232)
 * Status: not a support question