html onclick vs href

Question

当您单击带有 onclick 函数而不是 href 的触发按钮时，我试图弹出一个窗口。 我没有分享 CSS 因为它有点长。 HTML 代码的第 2 行，我想用链接到 JS“myFunction()”的 onclick 替换 href，这样我就可以只在某些特定情况下触发弹出窗口。

 HTML

  <div class="box">
  <a class="button" href="#popup1">upvote</a>
  </div>

  <div id="popup1" class="overlay">
  <div class="popup">
  <h3>Looks like you are not logged in!</h3>
  <a class="close" href="#">&times;</a>
  <div class="content">
  Please identify yourself before voting.
  </div>
  </div>
  </div>
 
JS
function myFunction() 
{
var popup = document.getElementById("popup1");
popup.classList.toggle("show");
}

Answer 1

您可以删除 href 并添加属性 onclick=myFunction()

并处理在 js 中显示和格式化弹出窗口

Answer 2

编辑过的 HTML，现在 onclick 属性正在替换该触发器的 href 属性<button> ，这是用于此类任务的语义正确的 HTML 元素：

<div class="box">
  <button onclick="myFunction()">upvote</button>
</div>
<div id="popup1" class="overlay">
  <div class="popup">
    <h3>Looks like you are not logged in!</h3>
    <a class="close" href="#">&times;</a>
    <div class="content">
      Please identify yourself before voting.
    </div>
  </div>
</div>