0

I have a realy hard problem that I couldn't find any solution in Internet

I used document.getElementsByClassName to access one HTML Element by It's class, my element is filterRow of dxDataGrid:

 var filterRowElement = document.getElementsByClassName("dx-datagrid-filter-row");
                console.log(filterRowElement);
                console.log(filterRowElement.length);

My Problem is: The first console.log return HTMLCollection with length = 1 but the second return 0 (I tried to get length to access filterRowElement[0]).

I've tried console.log(filterRowElement[0]) and got undefined too

This is screen shoot: enter image description here

I don't know why, it is the first time I got this problem

Please give me some advise. Thank you!

THANK YOU, I THINK MY PROBLEM IS DXGRID FILTERROW ELEMENT IS CONSECUTIVELY CHANGE SO I CAN'T ACCESS OLD ELEMENT

UPDATE

I don't know why but Using Jquery save Me (may be not alway true)

setTimeout(function () {
                    var getfilterRowElement = $(".dx-datagrid-filter-row");
                    console.log(getfilterRowElement[0]);
                }, 3000);

Result:

enter image description here

Thank you so much

An Pham Karion Co.Ltd
  • 462
  • 3
  • 16
  • Does this answer your question? [JS: iterating over result of getElementsByClassName using Array.forEach](https://stackoverflow.com/questions/3871547/js-iterating-over-result-of-getelementsbyclassname-using-array-foreach) – Amir Raminfar Jan 12 '20 at 23:34
  • no. foreach got empty, I tried but not working so I asked here – An Pham Karion Co.Ltd Jan 12 '20 at 23:51

1 Answers1

0

Updated: One reason why you might got a 0 for the second line, and a 1 for first line is: you print out filterRowElement.length, and it is true at that time, it was 0. When your event cycle is over, your framework (React, Angular, etc) updated the page (either after your actions or before your actions in the next event cycle). Now console.log prints out the whole structure and when you look at it in the debugger, now it is 1.

In order to solve this problem, I had to do something like this before:

setTimeout(() => {  

  doSomething();

}, 0);

So now you are waiting for the next event cycle so that your page is "constructed" or "updated".

If it is a static page, I was able to get 1 for both cases and able to access it:

Do you mean 

console.log(filterRowElement);

gave you an object with length being 1, and then

console.log(filterRowElement.length);

gave you 0?

The following works:

arr = document.getElementsByClassName("foo-bar");

console.log(arr);
console.log(arr.length);
arr[0].innerHTML = "hello world";

arr[0].style.background = "orange";
arr[0].style.display = "inline-block";
arr[0].style.padding = "1.2em";
arr[0].style.borderRadius = "6px";
<div class="foo-bar"></div>

getElementsByClassName is live... is your page being changed meanwhile? Try document.querySelectorAll(".foo-bar") instead:

arr = document.querySelectorAll(".foo-bar");

console.log(arr);
console.log(arr.length);
arr[0].innerHTML = "hello world";

arr[0].style.background = "orange";
arr[0].style.display = "inline-block";
arr[0].style.padding = "1.2em";
arr[0].style.borderRadius = "6px";
<div class="foo-bar"></div>
nonopolarity
  • 146,324
  • 131
  • 460
  • 740