DEV Community 👩‍💻👨‍💻

AakritiGoyal12458
AakritiGoyal12458

Posted on

Creating HTML <a> Anchor </a> Tag With JAVASCRIPT

This article will help you to create link over any text you have used in your webpage without using anchor tags of html .

Also whenever you will click on link it will ask you to confirm whether you want to continue or not ...

continue or not

Step 1

We know Browser know our current workspace and JavaScript is the best way to communicate with browser . So with this command
document.location="delete_me.html" JavaScript can ask for your current location from Browser .

Step 2

We have confirm dialog box in JS confirm()which gives its o/p as Boolean values . These values can be used with if and else conditions .

Code:

<script>
function abc(){

var c= confirm("Do you want to Continue....?? ");

if(c)
     {
          document.location="delete_me.html";
     }
else
     {
          alert("we stay here");
     }

}
</script>

<body>
<div onclick=abc()>Click me </div> 
</body>
Enter fullscreen mode Exit fullscreen mode

Thank You

Top comments (3)

Collapse
lukeshiru profile image
Luke Shiru • Edited on

I know there are different levels of experience in the platform, but that's even a stronger reason to say: Don't do this. This is really bad for accessibility, SEO, and so on.

Want to change the URL? Use an anchor! Want to run some code? Use a button.

This code should look like this:

<body>
    <button>Click me</button>
    <script>
        document
            .querySelector("button")
            .addEventListener("click", () =>
                confirm("Do you want to Continue....??")
                    ? (document.location = "./delete_me.html")
                    : alert("we stay here"),
            );
    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

Using a button and keeping the logic the same (adding the event from JS). Or like this:

<body>
    <a href="./delete_me.html">Click me</a>
    <script>
        document
            .querySelector("a")
            .addEventListener("click", event =>
                !confirm("Do you want to Continue....??")
                    ? (event.preventDefault(), alert("we stay here"))
                    : undefined,
            );
    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

Using an a and preventing the default behavior if the user doesn't confirm, otherwise taking the user to the expected destination.

Another kinda concerning thing about the example is that the button is redirecting to a "delete_me.html" page, which in a real world scenario would be really bad. Generally deletion actions should be handled from JS directly, not from a route. But this being an example maybe was "unrealistic" intentionally, so that's not as bad as using div for something that should be handled by either a or button.

If you really want to replicate the behavior of an anchor from another element, like a div (again, you really, really shouldn't), then you need to add proper keyboard interactions and focusability, aria labels and so on. Is not just make it redirect and "done", it takes way more work. Or you can simply just use the proper element.

Cheers!

Collapse
aakritigoyal12458 profile image
AakritiGoyal12458 Author

Thank you for your valuable suggestion . And I Have recently started my JavaScript journey and so I got to learnt a lot from your feedback . 😁

Collapse
alidarrudi profile image
ali

very simple...

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.