0

I want to show a confirmation box in javascript when an user clicks on

<link to="###">XYZ <link>

I have already tried <Link onclick="return confirm('Are you sure?')" to="###" >XYZ</Link> But it does not give the desired result.

Aman_Kawatra
  • 15
  • 6

2 Answers2

0

(Answer edited now that the question tags have been changed)

In Plain HTML

<link> isn't a valid tag for what you're trying to do; it's designed for pages to call in and embed external resources. It is not allowed to have child contents, and will not respond to user events when placed in the document body (I believe, though am not certain, that it is required to be in the document <head>.)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

Any valid HTML entity will work as you've shown:

<a onclick="return confirm('Are you sure?')" href="###" >XYZ</a>

<div onclick="return confirm('Are you sure?')" >ABC</div>

...but I suspect you intended to use the <a> tag. (As ScottMarcus correctly points out in comments, anchor tags aren't correct as hooks for arbitrary javascript, but since what you're controlling here is the navigation itself, it is an appropriate tag.)

In ReactJS

You've added the "reactjs" tag to the question, so it becomes clear that what you're trying to use is actually the React component "Link" rather than the (completely different) HTML tag.

I'm far from expert in React, but it appears that you need to wrap the event handler in {} brackets rather than quotes (which cause React to interpret the contents as a string) -- and should probably move the confirm code into a function contained within your React component.

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
0

The link element cannot be used in the way you are wanting. It's only allowed in the head section of a document and used to link out to external resources that the page requires.

Also, you shouldn't be using any kind of link to open a confirmation dialog in the first place as it is semantically incorrect and will cause issues for people that rely on assistive technologies (like screen readers) to view pages. Additionally, you'll need to cancel out the native behavior of clicking a link by with return false or event.preventDefault(), which essentially means you are asking the browser for a link but to please disable the link, which is counter intuitive. A link (<a>) is for navigation and shouldn't be used just as a "hook" to trigger some JavaScript.

Just about any element in the body supports a click event and for something like this, a button or just a div can easily do the job.

document.querySelector("div").addEventListener("click", function(){
  console.log(prompt("What is your favorite color?"));
});
<div>Click Me</div>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • There is a already written react front-end code by another developer where he uses to connect to other file in the code when someone clicks on it and I need to add a confirmation box before allowing the user to proceed. Is there any way I can achieve this? – Aman_Kawatra Feb 25 '18 at 17:24
  • @Aman_Kawatra Given that `link` is not meant to be used this way, I would think that it would not trigger a `click` event at all, which would mean that `onclick` or `.addEventListener()` wouldn't work on it. You could try event delegation and set up the event listener on an ancestor element and then check the `event.target` to see if it is the `link` element, but even then, I'm not confident that the `link` would be able to become the `event.target`. – Scott Marcus Feb 25 '18 at 17:28
  • @Aman_Kawatra "already written react front-end code" Aaaaah, there's the explanation. `` is a React component, which the framework will convert into valid HTML. If you're using React you should not be placing event handlers in the DOM at all; they belong in the component code. – Daniel Beck Feb 25 '18 at 18:43