Changing href value from JavaScript

Question

I have this example in JsFiddle.

<a href="http://www.yahoo.com" target="_blank" id="changeMe">Yahoo</a>
<a href="http://www.yahoo.com" target="_blank" id="changeMe">Not working</a>

$(document).ready (function () {


    $('#changeMe'). click (function (e) {
        var goLucky = Math.floor(Math.random()*12);
        if (goLucky % 2 == 0) {
            this.href = "http://www.google.com";
        } else {
            this.href = "http://www.hotmail.com";
        }
    });
});

The href change works in the first link, but not in the second. How can I make it work for both links??

The number of links in my page is dynamic, because I create the links with PHP, so I need the href change to work in all generated links.

Do you really think that faking a link like that is a good idea? — str
– str, Commented May 12, 2015 at 20:10
long story short, I'm just using this technique to add a variable at the end of the link: $('.changeMe'). click (function (e) { var x = document.forms["addcomponent"]["qty"].value; this.href = this.href + x; }); — Jack Casas
– Jack Casas, Commented May 12, 2015 at 20:24

War10ck · Accepted Answer · 2015-05-12 20:09:15Z

id attributes must be unique. You should convert the value changeMe to a classname for use on multiple elements. Then your existing code should work:

<a href="http://www.yahoo.com" target="_blank" class="changeMe">Yahoo</a>
<a href="http://www.yahoo.com" target="_blank" class="changeMe">Not working</a>

$(document).ready (function () {


    $('.changeMe'). click (function (e) {
        var goLucky = Math.floor(Math.random()*12);
        if (goLucky % 2 == 0) {
            this.href = "http://www.google.com";
        } else {
            this.href = "http://www.hotmail.com";
        }
    });
});

Optionally, you could add a unique id to the second anchor tag and modify the JavaScript code accordingly.

Brian Leishman · Accepted Answer · 2015-05-12 20:09:16Z

1

You cannot use an ID on two different elements in HTML. You need to asign each of those a different ID or the same class instead and then apply your href change on each of the IDs, or the class

answered May 12, 2015 at 20:09

Brian Leishman

8,67712 gold badges62 silver badges103 bronze badges

Comments

jojo · Accepted Answer · 2015-05-12 20:12:04Z

IDs should be used once per webpage. Classes can be used more plentifully. Remember your specificity. Use class instead of id: http://jsfiddle.net/PtNfD/115/

<a href="http://www.yahoo.com" target="_blank" class="changeMe">Yahoo</a>
<a href="http://www.yahoo.com" target="_blank" class="changeMe">Not working</a>

$(document).ready (function () {


    $('.changeMe'). click (function (e) {
        var goLucky = Math.floor(Math.random()*12);
        if (goLucky % 2 == 0) {
            this.href = "http://www.google.com";
        } else {
            this.href = "http://www.hotmail.com";
        }
    });
});

Collectives™ on Stack Overflow

Changing href value from JavaScript

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related