html onclick vs href-CodePudding

I am trying to have a pop up when you click a trigger button with the onclick function rather than href. I didn't share the CSS because it's a bit long. Line 2 of the HTML code, I want to replace the href with an onclick that's linked to the JS "myFunction()" so I can have the pop up triggered only at certain specific ocasions.

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

CodePudding user response：

You can just remove the href and add the attribute onclick=myFunction()

And handle displaying and formatting the popup in js

CodePudding user response：

Edited HTML, now the onclick attribute is replacing the href attribute of that trigger <button>, which is the semantically correct HTML element for such a task:

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