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

First of all for events you need to use buttons, and for links you should use anchor tags. I am relying on accessibility rules. — Observer, Jun 07 '18 at 19:06
Probably you don't want to use href for this, more at https://stackoverflow.com/a/9440536/8542002 — William Chong, Jun 07 '18 at 19:12
How are we supposed to know how "to call what the underline tag "button" originally did" when you don't show us what it actually did. You're just showing us something that you came up with that doesn't work, not the original thing. — Makyen, Jun 08 '18 at 23:28
When you click the text for the u tag, it successfully opens a file upload window. It's not so much that something isn't working (beyond this text not being focusable), but that I need to create something that is focusable but does the exact same thing when clicked (and when you press the enter key when it is in focus). Since it already works as is when you click it, I figured there is some way to make something with an anchor tag (or even a button tag) do the same thing when it is clicked without many additions to the javascript as I am trying to avoid editing that as much as possible. — Bryan, Jun 11 '18 at 13:57

score 0 · Answer 1 · answered Jun 07 '18 at 19:13

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>

score 0 · Answer 2 · answered Jun 16 '18 at 09:25

0

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>

answered Jun 16 '18 at 09:25

Vega

27,856
27
95
103

Converting tag to anchor tag

2 Answers2