How to Change the `href` Attribute of an `` Tag Using Javascript on Button Click?

Altering 'href' Attribute of Tag via Javascript Button Click

To modify the 'href' attribute of an tag using Javascript when a button is clicked, consider the following scenarios:

1. Preventing Page Reload

By default, clicking an empty tag reloads the page. To prevent this:

<code class="html"><a href="#" onclick="f1()"></a></code>

2. Disabling Scroll

Alternatively, you can use this to prevent scrolling to the top of the page:

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

3. Returning False in Function

You can also return false in the f1() function and use:

<code class="html"><a href="#" onclick="return f1();"></a></code>

4. Unobtrusive Method

Consider the following for a less intrusive approach:

<code class="html"><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></code>

The above is the detailed content of How to Change the `href` Attribute of an `` Tag Using Javascript on Button Click?. For more information, please follow other related articles on the PHP Chinese website!