Converting <u> tag to anchor tag

Question

I am trying to convert an old "button" to be implemented through an anchor tag. The "button" is actually comprised of a depreciated underline tag:

<u class="hoverable">Browse</u>

My idea was to change change it to an anchor tag by calling a javascript function in the href attribute where "something()" calls whatever click() did previously:

<a class="hoverable" href="javascript:something();">Browse</a>

However,

1) I am not sure if this is the best way to do it

2) Now, using "click()" as the function does nothing

I tried to use the chrome debugger tools and pause the execution when I click the original button, but all the call-stack says is "r.handle" and points to a long line of code that looks like gibberish.

Does anyone know how to set the anchor tag button to call what the underline tag "button" originally did?

Edit: I am trying to fix this code written a while ago by someone else so I am not entirely familiar with it. The part of the page it resides in is

When you click the underlined "Browse" text, a popup window opens that allows you to upload a file. However because it is just an underlined text element that is assigned a class, it is not focusable or accessible by keyboard. My task is to make it accessible by keyboard and use something other than the tag.

The javascript code behind the class hoverable is:

 this._hoverable( this.buttonElement ); this.buttonElement .addClass( baseClasses ) .attr( "role", "button" ) .bind( "mouseenter" + this.eventNamespace, function() { if ( options.disabled ) { return; } if ( this === lastActive ) { $( this ).addClass( "ui-state-active" ); } }) .bind( "mouseleave" + this.eventNamespace, function() { if ( options.disabled ) { return; } $( this ).removeClass( activeClass ); }) .bind( "click" + this.eventNamespace, function( event ) { if ( options.disabled ) { event.preventDefault(); event.stopImmediatePropagation(); } }); 

The file base behind this website is massive and somewhat convoluted. I am pretty new to the project and not really that familiar with it yet, so am trying to avoid making many backend changes if I can.

Answer 1

You can add the click event listener to all a elements as follows. You need to make sure you have the last two lines of e.preventDefault() and return false; to ensure the page does not navigate away. This does not use href at all, but I should note that if you omit href entirely, instead of setting it to an empty string, the hyperlink will not appear highlighted.

 //get all A elements var tags = document.getElementsByTagName('a'); //add the event listener to each element for (let i=0; i<tags.length; i++) { tags[i].addEventListener("click",function(e) { document.getElementById('par').style.display = "block"; //these two are needed to prevent the browser from navigating away from the page e.preventDefault(); return false; }); } 

 #par { display: none; } 

 <a href="">Click Me to Reveal a Message:</a> <p id="par">This is how you register a click handler to a hyperlink element.</p> 

Answer 2

You can use a anchor combined with label and input of type "file" and hidden. No javascript is involved, the focus is there:

 <a href=""><label for= "file"> <input type="file" hidden id="file">Browse</label></a>