Cannot change the href of element in Javascript

Question

I'm trying to change the "continue shopping" link on Shopify's "thank you" page but it doesn't work.

I've included the following code to the additional scripts section on checkout page settings.

<script>
    (function() {
         document.getElementsByClassName("step__footer__continue-btn")[0].href = "https://example.com/newlink";
    })();
</script>

Unfortunately, the node collection returned by the line below is always empty.

document.getElementsByClassName("step__footer__continue-btn")

The HTML part on the thank you page looks like this:

<a href="https://example.com/" data-trekkie-id="continue_shopping_button" class="step__footer__continue-btn btn">
 <span class="btn__content">Continue shopping</span>
 <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button" /> </svg>
</a>

See https://stackoverflow.com/questions/4498482/javascript-cant-find-element-by-id — George, Jan 24 '19 at 09:01
Possible duplicate of [Javascript can't find element by id?](https://stackoverflow.com/questions/4498482/javascript-cant-find-element-by-id) — George, Jan 24 '19 at 09:02
The JS part in wrapped in autoload function which is executed when the DOM is ready. Unfortunately, it doesn't work on Shopify for some reason. — chubbyk, Jan 24 '19 at 09:20

score 1 · Accepted Answer · answered Jan 24 '19 at 09:17

1

This is most likely because your JavaScript is loading before your HTML. There are two simple ways to fix this:

1: Place your <script> tags immediately before your closing </body> tag like so:

<script>
    //Your code
</script>
</body>

2: Place all your JavaScript code within a window.onload block:

window.onload = function() {
    //Your code here
};

answered Jan 24 '19 at 09:17

Jack Bashford

43,180
11
50
79

Thanks. Changing wrapper to window.onload = function() { solved the problem – chubbyk Jan 24 '19 at 09:23

score 0 · Answer 2 · answered Jan 24 '19 at 09:12

It is working for me

<html>

<head>
<script language='javascript'>
function msg(){
         var href = document.getElementsByClassName("step__footer__continue-btn");
         alert(href[0].href);
         document.getElementsByClassName("step__footer__continue-btn")[0].href = "https://example.com/newlink";
         alert(href[0].href);
}
</script> 

</head>
<body>
<input type="button" value="Click me" onclick="msg()"/>
<a href="https://example.com/" data-trekkie-id="continue_shopping_button" class="step__footer__continue-btn btn">
 <span class="btn__content">Continue shopping</span>
 <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button" /> </svg>
</a>
</body>
</html>

Yes, it works in jsfiddle for me too, but not on Shopify, even the js part is wrapped in the autoload function so the DOM must be ready. — chubbyk, Jan 24 '19 at 09:18

Cannot change the href of element in Javascript

2 Answers2