why isn't clientHeight 150px?

Issue

let height = document.getElementById('d').clientHeight
console.log(height);

img{
height:100%;}

<div id = 'd'>
<img src="https://via.placeholder.com/100x150">
</div>

Solution

Because the image hasn't loaded when your code is executing:

setTimeout(() => {
    let height = document.getElementById('d').clientHeight
    console.log(height);
}, 1000)

<div id = 'd'>
<img src="https://via.placeholder.com/100x150">
</div>

If your code depends on knowing the height of the image in order to run correctly, you need to check whether the image is loaded, and wait until it has if it hasn't yet.

Answered By - user229044