CODEWITHSUNDEEP
javascripthtmlfor-loopforeachgetelementsbytagname
ak85
ak85

Reputation: 4264

Set attribute for each item with javascript

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>

Upvotes: 0

Views: 6637

Answers (2)

A.B
A.B

Reputation: 20445

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>

Upvotes: 2

baao
baao

Reputation: 73241

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);
        }

Upvotes: 1

Related Questions