How to change href of tag on button click through javascript

Question

How to change the href attribute value of an <a/> tag through Javascript on button click ?

<script type="text/javascript">
  function f1()
  {
    document.getElementById("abc").href="xyz.php"; 
  }
</script>

<a href="" id="abc">jhg</a>
<a href="" id="" onclick="f1()">jhhghj</a>

The Way of Accessibility dictates to not use links this manner. Here: http://xkr.us/js/links — Free Consulting, Dec 06 '10 at 12:10

score 230 · Accepted Answer · answered Dec 06 '10 at 10:09

Without having a href, the click will reload the current page, so you need something like this:

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

Or prevent the scroll like this:

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

Or return false in your f1 function and:

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

....or, the unobtrusive way:

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

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

suggest add `event && event.preventDefault && event.preventDefault();` before `return false` — 袁文涛, Aug 03 '20 at 09:05

score 54 · Answer 2 · edited Apr 12 '22 at 01:43

54

Exactly what Nick Carver did there but I think it would be best if used the DOM setAttribute method.

<script type="text/javascript">
    document.getElementById("myLink").onclick = function() {
        var link = document.getElementById("abc");
        link.setAttribute("href", "xyz.php");
        return false;
    }
</script>

It's one extra line of code but find it better structure-wise.

edited Apr 12 '22 at 01:43

Harshil Modi

397
3
8
15

answered Dec 06 '10 at 10:26

jakobhans

826
7
16

11

IMO there's no need here, this has been a DOM property forever, `.href` works in all browsers...for example would you use `.getAttribute("id")` instead of just `.id`? :) – Nick Craver Dec 06 '10 at 10:34
4

You're right, it doesn't do anything special or different, it's just structural-wise. I like having all my DOM functions this way for later debugging/review: It's easier for me to see what the function is doing with this methods. Obviously your answer is right on the money :) – jakobhans Dec 06 '10 at 10:50
Thank you! still works today! – mick1996 Jan 18 '22 at 15:16

RobertO · Answer 3 · 2010-12-06T11:02:19.093

7

remove href attribute:

<a id="" onclick="f1()">jhhghj</a>

if link styles are important then:

<a href="javascript:void(f1())">jhhghj</a>

edited Dec 06 '10 at 11:02

answered Dec 06 '10 at 10:13

RobertO

2,655
1
20
18

1

a `` tag without `href` attribute? what? why? – Shikiryu Dec 06 '10 at 10:23
1

Leaving out the href will change it's style and behaviour. It then acts as an anchor instead of a link. – Cobra_Fast Dec 06 '10 at 10:35
1

no href makes it an anchor, click converts to a link, pretty normal – Free Consulting Dec 06 '10 at 12:07

score 6 · Answer 4 · answered Nov 12 '17 at 12:29

Here's my take on it. I needed to create a URL by collecting the value from a text box , when the user presses a Submit button.

<html>
<body>

Hi everyone

<p id="result"></p>

<textarea cols="40" id="SearchText" rows="2"></textarea>

<button onclick="myFunction()" type="button">Submit!</button>

<script>
function myFunction() {
    var result = document.getElementById("SearchText").value;
 document.getElementById("result").innerHTML = result;
 document.getElementById("abc").href="http://arindam31.pythonanywhere.com/hello/" + result;
}  
</script>


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

</body>
<html>

score 2 · Answer 5 · answered Dec 04 '16 at 00:00

2

<a href="#" id="a" onclick="ChangeHref()">1.Change 2.Go</a>

<script>
function ChangeHref(){
document.getElementById("a").setAttribute("onclick", "location.href='http://religiasatanista.ro'");
}
</script>

answered Dec 04 '16 at 00:00

user3325593

809
6
5

score 2 · Answer 6 · answered Nov 24 '20 at 13:58

2

<script type="text/javascript">
  function f1(mHref)
  {
    document.getElementById("abc").href=mHref; 
  }
</script>

<a href="" id="abc">jhg</a>
<button onclick="f1("dynamicHref")">Change HREF</button>

Just give the dynamic HREF in Paramters

answered Nov 24 '20 at 13:58

Abhishek K

41
5

score 1 · Answer 7 · edited Feb 18 '16 at 14:13

1

To have a link dynamically change on clicking it:

<input type="text" id="emailOfBookCustomer" style="direction:RTL;"></input>
        <a 
         onclick="this.href='<%= request.getContextPath() %>/Jahanpay/forwardTo.jsp?handle=<%= handle %>&Email=' + document.getElementById('emailOfBookCustomer').value;" href=''>
    A dynamic link 
            </a>

edited Feb 18 '16 at 14:13

Xavi López

27,550
11
97
161

answered Feb 18 '16 at 13:40

Mohsen Abasi

2,050
28
30

score -1 · Answer 8 · answered Jan 05 '12 at 05:36

I know its bit old post. Still, it might help some one.

Instead of tag,if possible you can this as well.

 <script type="text/javascript">
        function IsItWorking() {
          // Do your stuff here ...
            alert("YES, It Works...!!!");
        }
    </script>   

    `<asp:HyperLinkID="Link1"NavigateUrl="javascript:IsItWorking();"`            `runat="server">IsItWorking?</asp:HyperLink>`

Any comments on this?

How to change href of tag on button click through javascript

8 Answers8

Linked

Related