accessing certain element in HTMLCollection

Question

I am trying to use document.getElementsByClassName in an angular component but sometimes I get unexpected value. document.getElementsByClassName sometimes give a value (HTML element) and other times is undefined.

I have this block of code inside ngOnInit

window.addEventListener('load', function (){
      let tabcontent = document.getElementsByClassName('tab');
      console.log(tabcontent[0]); // <----- 
    })

and I have this in the view template

<div id='parent_div_2'>
    <div *ngFor="let collection of collections; let i=index">
      <!--targeted element -->
      <div class="tab tab{{i}}" *ngIf="collection != null">
        <table class="table table-borderless">
          <tbody>
            <tr *ngFor="let each of collection.collApps; let i = index">
              <td>
                <img *ngIf="imageLoaded && this.imageToShow[i]" [src]="this.imageToShow[i]" 
                style="width:30%;" alt="Place image title">
              </td>
              <td> <h4>{{each.name}}</h4></td>
              <td> <form #form action="http://{{each.link}}"> 
                <input type="submit" value="Launch" (click)="form.submit()"/> 
              </form> </td>
            </tr>
          </tbody>  
        </table>
      </div>
    </div>
  </div>

the console.log output undefined sometimes while other times give some HTML element. Any explanation of why document.getElementsByClassName gives undefined value sometimes!!

You should use `@ViewChildren` and subscribe to the `QueryList.changes` event, as shown in [this answer](https://stackoverflow.com/a/50306090/1009922) and in [this other answer](https://stackoverflow.com/a/51730156/1009922). — ConnorsFan, Jul 14 '19 at 16:30
This line tells me collection != null, the tab only is available if collection is not null. Is collection always set? I'm asking because your code always execute on load, and if in some cases that collection is not present, it will return undefined. — Ion, Jul 14 '19 at 16:31
@AZSH - Please show a stackblitz with the code and HTML markup that you use with the `@ViewChildren` technique. — ConnorsFan, Jul 16 '19 at 14:51
@ConnorsFan I am not using `document.getElementsByClassName` anymore. Instead, I use `@ViewChildren` which I did not know about it before. — x7R5fQ, Jul 16 '19 at 15:00
@ConnorsFan yes It does, but as you know I am searching for a method to store the value that is generated inside the `subscribe` method as a class property so I can manipulate the HTML elements in other parts of the class. — x7R5fQ, Jul 16 '19 at 15:11
If you provide a stackblitz with your code, I (or someone else) could help you with that. — ConnorsFan, Jul 16 '19 at 15:14
@ConnorsFan I am not that much familiar with stackblitz. I will check it out later bkz I need to go now. Appreciate your help. — x7R5fQ, Jul 16 '19 at 15:18

corrado4eyes · Answer 1 · 2019-07-14T16:26:52.370

1

I'm not sure, but maybe is because the page is loading and the elements and the one you're trying to access is still undefined. Try to use this...

window.addEventListener('DOMContentLoaded', (event) => {
    // do something
});

edited Jul 14 '19 at 16:26

answered Jul 14 '19 at 16:22

corrado4eyes

283
2
11

but the line of code that contains `document.getElementsByClassName` should run when the page is loaded!! – x7R5fQ Jul 14 '19 at 16:26
`DOMContentLoaded ` yields worse results. I got `undefined` all the times. – x7R5fQ Jul 14 '19 at 16:30

score 0 · Answer 2 · answered Jul 14 '19 at 16:28

If you're using angular you should do things the angular way. Angular has an init event which you can call:

<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

// in controller
$scope.init = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
};

See this post: How to execute AngularJS controller function on page load?

accessing certain element in HTMLCollection

2 Answers2

Linked