Having an anchor tag within an HTML button tag

Question

I have an anchor tag within a button tag description in HTML as below:

<button type="submit" onClick="handleSubmit()">Desc.... 
   <a href="https://......." target="_blank">Click here for more details</a>
</button>

Now when I click on the anchor text, the action "handleSubmit()" executes instead of going to my https:// link.So apparently, my text is also being treated as a button instead of a hyperlink.

I tried adding the z-index property to my CSS for (z-index: 1) in order to make it independently clickable so it overlays on top of the button tag, but no joy!

But if I right-click on the text, I do see the option of opening the https link in a new tab and it does so perfectly. Only when I click on it normally(left click), the button click handler executes as if its the button being clicked instead of the anchor tag.

How can I fix this? Any help would be much appreciated, thank you.

Answer 1

I don't quite understand if you intend to use the function inside the onClick in any situation. You can swap the wrapping of elements so that the button is inside the link; also you could move the link inside the onClick like this:

onClick="window.location.href='link'"

Thought these can be a couple solutions, you need to clarify the exact behaviour you expect to obtain from your code.