在 JS 中操作按钮的链接

Question

我正在尝试操作按钮的超链接，但我对此无能为力，也不知道哪里出错了。

代码：

<link rel="stylesheet" href="https://cdn.site.td/Calendar.css">
<script type="text/javascript" src="https://cdn.site.td/Calendar.js"></script>
<div id="the-calendar"></div>
<script>
   document.addEventListener("DOMContentLoaded", function() {
   var options = {
   fullNames : false
   };
   var myCalendar = new Calendar(document.getElementById('the-calendar'), options);
   });
</script>

这会生成一个加载到单独网站上的事件日历。将它加载到一个单独的域时，它可以完美地工作，除了一件事。有一个事件的更多信息按钮，当您单击它时，它会尝试转到：

/folder/folder/folder/event-name-1

当然，当我在单独的域中生成它时，它会尝试使用相同的文件夹路径，但当前域除外。因此它无处可去，因为两个域上的文件夹都不相同。

我想给按钮添加一个onClick事件来操作超链接的路径。

按钮是：

<button class="calendar-icon-info-action">More info</button>

请记住，在上面的初始脚本加载并使用日历的 HTML 填充页面之前，不会生成此按钮。

因此，一旦加载了日历，我就需要为每个要操作的事件添加更多信息链接以添加原始域路径。我需要一个变量来存储原始路径，因为它也不会改变。

因此，回顾一下潜在客户生成的更多信息：

/folder/folder/folder/event-name-1

我希望将其存储在一个变量中，然后将另一个用于域的 var 存储在一起，这样它就变成了这样：

var a = "domain.tld";
var b = "/folder/folder/folder/event-name-1";
var c = a + b;

document.getElementsByClassName("calendar-icon-info-action")[0].addEventListener("click", function(){
document.getElementsByClassName("calendar-icon-info-action")[0].href = var c;
});

Answer 1

href 属性仅适用于标签（链接）。既然你有一个<button>，你可以做的是拦截并阻止原始事件，并将页面重定向到所需的 URL。

类似这样的：

document.getElementsByClassName("calendar-icon-info-action")[0].addEventListener("click", function(event){
    // This will stop the original event:
    event.preventDefault();

    // This will open your desired URL:
    window.location.href = c
});

如果您有多个按钮并且想要更新所有按钮的事件，您可以循环按钮：

document.querySelectorAll(".calendar-icon-info-action").forEach((elem) => elem.addEventListener("click", function(event){
    event.preventDefault();
    window.location.href = c;
}))

---

为了将来参考，如果您有链接而不是按钮，并且想要更改 href 属性，那么正确的做法是：

document.getElementsByClassName("calendar-icon-info-action")[0].setAttribute('href', 'your-url-here')