JavaScript running in console but not page

Question

I'm trying to disable a button on my site. The JavaScript I have works in the console:

list = document.getElementsByClassName("single_add_to_cart_button button alt");
list[0].disabled = true;

But adding it to the page doesn't work:

add_action( 'wp_head', function () { ?>
    <script>
    list = document.getElementsByClassName("single_add_to_cart_button button alt");
    list[0].disabled = true;
    </script>
<?php } );

I've also tried waiting for the object to load:

add_action( 'wp_head', function () { ?>
    <script>
    list = document.getElementsByClassName("single_add_to_cart_button button alt");
    list[0].addEventListener("load", disable);
    function disable() {    
        list = document.getElementsByClassName("single_add_to_cart_button button alt");
        list[0].disabled = true;
    };
    </script>
<?php } );

Which doesn't seem to work either. The page in question is here.

score 0 · Answer 1 · answered Feb 19 '19 at 09:34

The script does not works as it is probably executed before the HTML is fully loaded. Move the script to the bottom of the body as follows, that should work without checking that document is fully loaded:

<html>
  <body>
  <!--- your content --->

    <script>
    list = document.getElementByClassName("single_add_to_cart_button button alt");
    list[0].addEventListener("load", disable);
    function disable() {    
        list = document.getElementsByClassName("single_add_to_cart_button button alt");
        list[0].disabled = true;
    };
    </script>
  </body>
<html>

JavaScript running in console but not page

1 Answers1