时间戳

首页 > 解决方案 > 在 JS 中操作按钮的链接

javascript - 在 JS 中操作按钮的链接

问题描述

我正在尝试操作按钮的超链接，但我对此一无所获，也不确定我哪里出错了。

编码：

<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;
});

标签： javascriptbuttonhyperlinkaddeventlistenergetelementsbyclassname

解决方案

该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')

推荐阅读