Unable to get my javascript to work on my website – what am I doing wrong?

Question

Firstly, the JS is wrong:

In the browser Developer/Web Inspector > Console on your site, I typed $() and got “undefined”. I then did jQuery(), and it shows a value, so it is defined. So you should be using jQuery(, not $( throughout.

Sidenote: I see the continue button is simply a <button> element, not within a <form>, but if it will be, with .click() you’ll want to prevent the default button click action. You do this with:

yourButton.click(function(e){
  e.preventDefault;
  // your code
  return false; 
});

—

So I was able to get the button click to fire, through console, with this:

jQuery("#product-details-continue").click(function(e) {
  e.preventDefault;
  alert('👋');
});

Not necessary, but you may also want to consider wrapping your jQuery in ready to ensure your DOM is fully loaded,

jQuery(document).ready(function() {
  jQuery("#product-details-continue").click(function(e) {
    e.preventDefault;

    // your code
    alert('👋');

    return false;
  });
});

Adding in your code, I could get the URL popup with input values via the console with:

jQuery(document).ready(function() {
  jQuery("#product-details-continue").click(function(e) {
    e.preventDefault;


    var vrnt = jQuery("input[name=variant_id]:checked").val();
    var qnty = jQuery("input[name=quantity]:checked").val();

    var addr = "https://cruxstickers.com/product/" + vrnt + "-" + qnty;

    alert(addr);

    return false;
  });
});

Secondly, to get this into your site, in your theme’s functions.php file, or in your plugins main .php file – where ever you’re developing out of – you can add the following to inject the JS code into the footer of your site:

add_action('wp_footer',function(){
    ?>
    <script>
    jQuery(document).ready(function() {
      jQuery("#product-details-continue").click(function(e) {
        e.preventDefault;

        var vrnt = jQuery("input[name=variant_id]:checked").val();
        var qnty = jQuery("input[name=quantity]:checked").val();

        var addr = "https://cruxstickers.com/product/" + vrnt + "-" + qnty;

        alert(addr);

        return false;
      });
    });
    </script>
    <?php
});

Lastly, you pasted HTML with a script tag for https://ajax.googleapis..../jquery.min.js but you don’t need that, and it wasn’t working. If you browse your source code, you’ll see you have

<script type="text/javascript" src="https://cruxstickers.com/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script>

already, that’s why jQuery no-conflict mode jQuery() was working. If you were to use your external script, you should enque it into your WordPress theme properly with wp_enqueue_script().

Related Posts: