Set attribute for each item with javascript

Question

I want to add an attribute to each item in my list. I currently have the below which isn't working. When I output the length of my var in the console outside the for loop it seems to output the correct number. However when I try and apply an attribute in the for loop it isn't working because the length doesn't seem to be working? What am I doing wrong here? How can this be improved so that I can apply an attribute to each item in my list?

console.log

    test1 length || 3
    test2 length || 3
    test1||0
    TypeError: this.setAttribute is not a function

        var test1 = document.getElementById('test1').getElementsByTagName('a');
        var test2 = document.getElementById('test2').getElementsByTagName('div');
        console.log('test1 length || ' + test1.length);
        console.log('test2 length || ' + test2.length);

        for (var i = 0; i < test1.length; i++) {
          console.log('test1||' + i);
          this.setAttribute('title', 'test1' + i);
        }

        for (var i = 0; i < test2.length; i++) {
          console.log('test2||' + i);
          this.setAttribute('title', 'test2' + i);
        }

        <div id="test1">
            <a href="#">link 1</a>
            <a href="#">link 2</a>
            <a href="#">link 3</a>
        </div>

        <div id="test2">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

What made you think this would refer to a DOM element? I recommend to read the MDN documentation about this. — Felix Kling
– Felix Kling, Commented Dec 18, 2014 at 22:50

A.B · Accepted Answer · 2014-12-18 22:54:10Z

you have got test as an array and looping through it you can reference that particular item with test[i].

this will be referring to window object.

replace

      this.setAttribute('title', 'test1' + i);

with

      test[i].setAttribute('title', 'test1' + i);

Same goes for test2 also.

Working output below

var test1 = document.getElementById('test1').getElementsByTagName('a');
        var test2 = document.getElementById('test2').getElementsByTagName('div');
        console.log('test1 length || ' + test1.length);
        console.log('test2 length || ' + test2.length);

        for (var i = 0; i < test1.length; i++) {
          console.log('test1||' + i);
          test1[i].setAttribute('title', 'test1' + i);
        }

        for (var i = 0; i < test2.length; i++) {
          console.log('test2||' + i);
         test2[i].setAttribute('title', 'test2' + i);
        }

        <div id="test1">
            <a href="#">link 1</a>
            <a href="#">link 2</a>
            <a href="#">link 3</a>
        </div>

        <div id="test2">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>

baao · Accepted Answer · 2014-12-18 22:48:38Z

You don't have this here

this.setAttribute('title', 'test2' + i);

You need to change it to

test1[i].setAttribute(...

and

test2[i].setAttribute(...

Working:

        var test1 = document.getElementById('test1').getElementsByTagName('a');
        var test2 = document.getElementById('test2').getElementsByTagName('div');
        console.log('test1 length || ' + test1.length);
        console.log('test2 length || ' + test2.length);

        for (var i = 0; i < test1.length; i++) {
          console.log('test1||' + i);
          test1[i].setAttribute('title', 'test1' + i);
        }

        for (var i = 0; i < test2.length; i++) {
          console.log('test2||' + i);
          test2[i].setAttribute('title', 'test2' + i);
        }

Collectives™ on Stack Overflow

Set attribute for each item with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related