Adding target="blank" to links with javascript

Question

I'm attempting to add target="_blank" to links on a page depending on a checkbox click.

On the javascript side I have:

 function newTab(v) {
      if(v.tab.checked == true) { 
        document.getElementsByTagName('a').setAttribute('target', '_blank');
      } else {
        document.getElementsByTagName('a').setAttribute('target', '_self');
      }
  } //end function

And on the HTML side I have:

<form>
    <input type="checkbox" name="tab" onclick="newTab(this.form)" />
    <label>Open Links In New Tab?</label>
</form>

<a href="//mail.google.com">Gmail</a>

Naturally it isn't as simple as I thought it would be, so it doesn't work.

The page contains over a dozen links so I need the checkbox to apply to all links on the page - why I used getElementsByTagName(). Any help appreciated!

EDIT:

Code that works is as follows:

  function newTab(f) {
    var els = document.getElementsByTagName('a'); //read anchor elements into variable
    if(f.tab.checked == true) { //If the box is checked.
      for (var i in els) {
        els[i].setAttribute('target', '_blank'); //Add 'target="blank"' to the HTML
      } 
    } else { // not checked...
      for (var i in els) {
        els[i].setAttribute('target', '_self'); //Add 'target="self" to HTML
      }
    }
  } //end function.

You have a typo error. Instead of 'target' you have wrote 'taget' — Nuxy
– Nuxy, Commented Aug 13, 2012 at 11:29
It's probably easier to implement window.open(), which will open a new window, or tab, instead of adding/changing attributes. — David Thomas
– David Thomas, Commented Aug 13, 2012 at 11:31
Thanks on the typo @DavidThomas - Because I want the option able to be toggled. Maybe they don't want the links to automatically open in new windows. — Remy Sheppard
– Remy Sheppard, Commented Aug 13, 2012 at 12:27

Mitya · Accepted Answer · 2012-08-13 11:31:09Z

4

getElementsByTagName() returns a nodeset. You need to iterate over it and apply the change to each one in turn. What you currently have is more like jQuery syntax, which handles this internally for you.

This would have shown up in the console. With JS issues, always check the console before wondering what's wrong.

var els = document.getElementsByTagName('p');
for (var i=0, len = els.length; i<len; i++)
    els[i].setAttribute('name', 'value');

Also, with checkboxes use change, not click events, as someone might toggle them via the keyboard, not mouse. Lastly, you should look into handling your events centrally, not inline DOM-zero events specified in the HTML. Numerous reasons for this that are beyond the scope of this question.

answered Aug 13, 2012 at 11:31

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Remy Sheppard Over a year ago

I used .checked which works no matter how they check the box. Also, slight mod of your code got it to work Thank you

Collectives™ on Stack Overflow

Adding target="blank" to links with javascript

EDIT:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related