Element is (nearly) empty even though waited for document to load?

JavaScript
1

Hi,
I’ve got a function that I am trying to use to be able to copy the attribute (property) of one element to another. E.g. making the height of a div so that it is the same as the height of another div. The first thing I do in the function is wait to ensure that the elements are loaded using jQuery. However, even though I have that step, when I print out the properties of “loaded” elements, they come back undefined or empty.

Consider this code and its results:

function copyAttribute(attribute, reciever, original){
  $(window).on("load", function(){
    reciever = document.getElementById(reciever);
    original = document.getElementById(original);
    console.log(attribute);
    console.log(Object.keys(reciever));
    console.log(reciever.height);
    console.log(reciever[attribute]);
    console.log(reciever);
  });
}//end copyAttribute()

799×198 5.93 KB

I have tried using the same code but with $(document).ready() instead of $(window).on("load") and received the exact same results.

I am completely baffled, I have no idea why this is happening or what to do. Any help would be greatly appreciated!

2 
    console.log(attribute);

Outputs as expected

    console.log(Object.keys(reciever));

an Element is not an Object, and has no Keys.

    console.log(reciever.height);

The element you have targeted has no height set.

    console.log(reciever[attribute]);

The element you have targeted still has no height set.

    console.log(reciever);

Outputs as expected.

1 Like
3

If you’re looking for the element’s height on screen, look for offsetHeight instead.

4

Is there a reason you can’t do this with CSS and no JavaScript? eg. display table or display flex.

1 Like
5

Oh, the receiver does not have a height? Why is that? If I view it with in the Developer Mode it says it is a div that has dimensions, so why does receiver.height not grab the height attribute of the element shown in the Developer Mode?

6

Yes, because it is a whole thing where an element needs to grab info from its grandchild but the child in the middle is of a different height that overlaps its parents :slight_smile:

1 Like
7

Sounds like a broken concept to me or one that should be the job of CSS and not JS. What happens if the user zooms the text after you’ve resized the elements?

Nearly every time I’ve seen someone equalising a div’s height with JS has indicated that they have taken the wrong approach to start with and ended up with a fragile solution.

However without seeing the full code and situation I am just guessing a little so may be wrong:)

2 Likes
8

Oh. The problem here was that I was trying to use dot notation and bracket notation to read the CSS properties of an element, when you are only able to use the dot/bracket notation to set those values.

That is such a fundamental concept of Javascript interacting with CSS, I’m baffled that I didn’t know that before.

I am also confused as to why that is not something that has been implemented, because it seems like such an easy and basic functionality to have. Being able to use element.color to query the text color (or whatever other property) of an object seems like such a no-brainer, I have no idea why that is not an ability built into Javascript.

9
2 Likes
10

Yup, although I ended up just using element.clientHeight instead :slight_smile: Thanks!

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.