How to Dynamically Change the Href Attribute of an Anchor Tag with JavaScript?

Changing the Href Attribute Value of an Anchor Tag on Button Click via JavaScript

Modifying the href attribute of an anchor () tag on button click using JavaScript can be achieved through various methods. Here are some effective approaches:

Using an Empty Href Attribute

To retain the current page's functionality without reloading, assign an empty href attribute to the anchor tag:

<code class="html">&lt;a href=&quot;#&quot; onclick=&quot;f1()&quot;&gt;&lt;/a&gt;</code>

Preventing Scrolling

The default action of an empty href link is to scroll the page to the top. To prevent this, add a 'return false;' statement to the onclick function or inline:

<code class="html">&lt;a href=&quot;#&quot; onclick=&quot;f1(); return false;&quot;&gt;&lt;/a&gt;</code>

Returning False from the Function

You can also return false from within the onclick function:

<a href="#" onclick="return f1()"></a>

<script>
function f1() {
  // perform actions
  return false;
}
</script>

Unobtrusive JavaScript Approach

For a more organized approach, use unobtrusive JavaScript to select the anchor tag and handle the click event separately:

<a href="#" id="abc"></a>
<a href="#" id="myLink"></a>

<script>
document.getElementById("myLink").onclick = function() {
  document.getElementById("abc").href = "xyz.php";
  return false;
};
</script>

By implementing these strategies, you can effectively modify the href attribute of an anchor tag on button click using JavaScript, achieving desired functionality and maintaining compatibility across browsers.

The above is the detailed content of How to Dynamically Change the Href Attribute of an Anchor Tag with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!