JavaScript: How do I add an attribute?

Question

I'm trying to add the target attribute to some anchors when a radio button is checked; however it isn't working.

Here is my code:

<body>
<ul id="main">
    <li><a href="https://www.google.co.uk/">Google</a></li>
    <li><a href="http://www.youtube.com/">YouTube</a></li>
    <li><a href="https://twitter.com/">Twitter</a></li>
</ul>
<input type="radio" name="input" id="input" />
<script type="text/javascript">
document.getElementById('input').checked = function changeTarget() {
    document.anchors.setAttribute('target', '_blank');
}
</script>
</body>

What am I doing wrong? (Note: I don't want a JQuery solution)

Thanks.

Edit: Phew. Done it thanks to all the answers, here's my final code:

    document.getElementById('input').onclick = function changeTarget() {
    if(this.checked) {
        var b = document.getElementsByTagName('a');
        for (a = 0; a < b.length; a++) {
            b[a].target = '_blank';
        }
    }
}

http://stackoverflow.com/questions/804256/how-do-i-add-target-blank-to-a-link-within-a-specified-div you may check this — mfadel, Apr 14 '12 at 12:11

score 2 · Answer 1 · answered Apr 14 '12 at 12:08

You're setting the "checked" property of the radio button to a function. The "checked" property is a boolean that indicates whether the radio button is currently checked. Thus, that statement has the effect of setting it to true. You probably intend to have that be an event handler, so that should probably be "onclick" instead of "checked".

Setting the "target" property of the <a> tags cannot be accomplished like that. You'll have to use document.getElementsByTagName() and then iterate through the node list that's returned, setting the "target" property of each. No need to use .setAttribute(); just set the property directly on the DOM nodes.

No, don't use `document.anchors`. Use `document.getElementsByTagName('a')`. — Pointy, Apr 14 '12 at 12:23
Okay thanks, can you look at my revised edit and see whats still wrong? — Harry, Apr 14 '12 at 12:27

Dennis · Answer 2 · 2012-04-14T12:17:12.880

document.anchors is a collection so you need to iterate over it. You also want the onclick event - there you can determine if the input is checked or not.

document.getElementById('input').onclick = function changeTarget() {
    if( this.checked ) {
        var anchors = document.getElementsByTagName("a");
        for(var i = anchors.length - 1; i>=0; i--) {
            anchors[i].target = '_blank';
        }
    }
}

According to MDN - document.anchors only returns anchors with a name attribute - gEBTN will return all of the anchors.

Alternatively:

document.getElementById('input').addEventListener("click", changeTarget, false);

The "target" attribute from HTML is accessible as a property directly on the DOM nodes. No need to use `.setAttribute()`. — Pointy, Apr 14 '12 at 12:09

score 1 · Answer 3 · 2012-04-14T12:17:01.333

As i know, checked is a property so you cannot assign a function to it. You can attach a click event on #input to change anchors target:

document.getElementById('input').onclick = function()
{
    var anchors = document.getElementsByTagName('a');
    if(this.checked)
        for(var i = 0, s = anchors.length; i < s; i++) {
          anchors[i].target = '_blank';
        }
    else
        for(var i = 0, s = anchors.length; i < s; i++) {
          anchors[i].target = '_self';
        }
}

UPDATE: In my code #input must a checkbox

<input type="checkbox" id="input" />

Teemu · Accepted Answer · 2012-04-14T12:49:24.917

1

With your edited code you set the targets every time to _blank when clicking the radio button. Also anchors-collection is not the right-one to use in this case.

document.getElementById('input').onclick = function changeTarget() {
    var n,a=document.links.length;
    if(document.getElementById('input').checked){
        for(n=0;n<a;n++){
            document.links[n].target='_blank';
        }   
    }
}

document.links is a collection-object containing the A-elements in the document which have an href or nohref-attribute. A collection-object is quite similar to an array, and you can refer to it's members with an index (n).

edited Apr 14 '12 at 12:49

answered Apr 14 '12 at 12:35

Teemu

22,918
7
53
106

I'm not confident with JavaScript so can you explain `links[n]` that to me? As in what does the [n] mean? Thanks. – Harry Apr 14 '12 at 12:37
@Teemu Why are you advocating `document.getElementById("input").value` over `this.value`? – Dennis Apr 14 '12 at 13:14
what about the original question referring to `links[n]` what is the `[n]` for? – Harry Apr 14 '12 at 14:56
@Dennis Funny, seems that you're right with this... Never too old to learn... Thanks for a feedback. – Teemu Apr 14 '12 at 15:05
@Harry Like I said in my answer, collection-objects are quite similar to arrays. `links[N]` refers to the `N`th member (actually a property) in the `links`-collection. – Teemu Apr 14 '12 at 15:25

JavaScript: How do I add an attribute?

4 Answers4