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>
2 answers
solution1
1 ACCPTED 2019-01-24 09:17:19
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
};
solution2
0 2019-01-24 09:12:25
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.