Question

我正在尝试更改Shopify的“谢谢”页面上的“继续购物”链接，但是它不起作用。

我已在结帐页面设置的其他脚本部分添加了以下代码。

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

不幸的是，下面一行返回的节点集合始终为空。

document.getElementsByClassName("step__footer__continue-btn")

“谢谢”页面上的HTML部分如下所示：

<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>

Answer 1

这很可能是因为JavaScript在HTML之前加载。有两种简单的方法可以解决此问题：

1：像这样将<script>标签紧接在结束</body>标签之前，

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

2：将所有JavaScript代码放在window.onload块中：

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

Answer 2

对我有用

<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>

无法更改Javascript中元素的href

2 个答案: