javascript - 2 个选择器功能似乎相互抵消

Question

我在当前的小脚本中设置了两个选择器。无论哪一个在顶部都可以工作，无论哪一个在顶部之下都不起作用或抛出错误。我通过 linter 运行了整个脚本，没有出现任何问题。

这里有两个选择器，其基本功能是preventDefault。

 var btn = document.getElementById('scandrive');
btn.addEventListener("click", function(event) {
  event.preventDefault();
  myFunction();
});

var getLink = document.querySelector('mylink');
getLink.addEventListener("click", function(event) {
  event.preventDefault();
  alertMe(getLink.href);
});

无论哪个是第一个，都可以正常工作和执行。此外，每个页面都涉及不同的页面，因此不应有任何冲突。

老实说，我一直在寻找是否我没有正确地布置代码，但没有什么突出的。我假设通常我可以在开始、中间或结束处设置一个选择器。另外，提及它可能并不重要，但脚本链接位于结束正文标记的正上方，以防万一。我已经在头脑中尝试过了，但没有什么区别。

编辑:添加 html -

<ul class="list-group">
      <a id="mylink" href="link1">Link 1</a>
 </ul>

<button type="submit" class="btn btn-info" id="scandrive" input type="Submit">Check to scan or update</button>

Answer 1

请尝试一下:

var btn = document.getElementById('scandrive');
btn.addEventListener("click", function(event) {
  event.preventDefault();
  myFunction();
});

var getLink = document.getElementById('mylink');
getLink.addEventListener("click", function(event) {
  event.preventDefault();
  alertMe(getLink.getAttribute(href));
});

如果您想使用 querySelector 标记 ID，您应该将其作为 css 选择器 (#myLink) 传递，并且 HTMLElements 没有 href 属性，因此您必须通过 getAttribute 方法提取它