title: JavaScript running in console but not page
body: <p>I'm trying to disable a button on my site. The JavaScript I have works in the console:</p>
  
  <pre><code>list = document.getElementsByClassName("single_add_to_cart_button button alt");
  list[0].disabled = true;
  </code></pre>
  
  <p>But adding it to the page doesn't work:</p>
  
  <pre><code>add_action( 'wp_head', function () { ?&gt;
      &lt;script&gt;
      list = document.getElementsByClassName("single_add_to_cart_button button alt");
      list[0].disabled = true;
      &lt;/script&gt;
  &lt;?php } );
  </code></pre>
  
  <p>I've also tried waiting for the object to load:</p>
  
  <pre><code>add_action( 'wp_head', function () { ?&gt;
      &lt;script&gt;
      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;
      };
      &lt;/script&gt;
  &lt;?php } );
  </code></pre>
  
  <p>Which doesn't seem to work either. The page in question is <a href="https://beanut.net/?product=vneck-tee" rel="nofollow noreferrer">here</a>.</p>