Search code examples
javascripthtmlfor-loopforeachgetelementsbytagname

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>


Solution

  • 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>