Member Avatar for MDGM

Hi all.

I basically need to know how to get a link's href value using the getelementbytagname code and storing that value in a variable so it can be used later in the same function.

Thanks,

Max

  • 2 Contributors
  • 3 Replies
  • 3K Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by MDGM

Dani AI

Generated

Short answer to the title: document.getElementByTagName("a").href will not work. The API is getElementsByTagName (plural) and it returns a live HTMLCollection, not a single element. If you really wanted the first link’s URL you would use document.getElementsByTagName("a")[0].href, but you rarely need to grab links this way today.

A cleaner, scalable pattern is event delegation. It handles existing and future links without looping, and it lets you capture both the raw attribute and the fully-resolved URL in one place:

// Handle all link clicks in one listener
document.addEventListener('click', function (e) {
  const a = e.target.closest('a[href]');
  if (!a) return;

  const rawHref = a.getAttribute('href'); // as written in HTML (may be relative)
  const absHref = a.href;                 // resolved absolute URL

  // store for later use in this function
  const linkForLogic = absHref;

  // optionally stop navigation if you need to do work first
  // e.preventDefault();
  // ... your logic here ...
});

Notes that complement @langsor’s approach:

  • Prefer addEventListener over setting onclick. Also watch for typos: it is onclick, not onlick, and use links[i] (or links.item(i)) when iterating.
  • href vs getAttribute('href'): a.href is absolute and reflects DOM/base changes; a.getAttribute('href') is the literal attribute, which is often what you want if you are logging or rewriting URLs.
  • Because getElementsByTagName returns a live collection, indices can shift if you change the DOM while iterating. If you do need a static list, use document.querySelectorAll('a') and iterate that, or stick with delegation as above.

Recommended Answers

All 3 Replies

Member Avatar for Member #380484

Hi,

If you need to handle all links on the page this way, then use something like this ...

window.onload = function () { // wait until the page is loaded
  var links = document.getElementsByTagName('a');
  for ( var i = 0; i < links.length; i ++ ) {
    link.item(i).onlick = function () {
      // store the href of link on click here
      alert( this.href ); // or alert( this.getAttribute('href'); // more proper
    };
  }
};

If you just need one links href when it is clicked then something like this ...

window.onload = function () { // wait until the page is loaded
  var link = document.getElementById('one_link');
  link.item(i).onlick = function () {
    // store the href of link on click here
    alert( this.href ); // or alert( this.getAttribute('href'); // more proper
  };
};
</script>
</head>
<body>
<a id="one_link" href="some_page.html">One Link</a>

... more stuff ...

There are other approaches as well, but this is a pretty standard way to do it.

Cheers

Member Avatar for Member #380484

Right, using it later in the same function ... easy enough

var active_href = this; // from above code.

Let me know if this is not what you meant or have any questions about this.

Member Avatar for MDGM

That worked thanks. (I used the last one)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.