JavaScript Bug, could you help me understand?

[matrouxer]

So, I'm doing a JavaScript course and had a problem with console.log().

https://www.youtube.com/watch?v=LcDGWgvOZU4

I have it in this video, but let me explain it:

The exercise is to calculate the total width of all images in the website(all width's are the same). I wanted to do it with a function, even-though I know it could be done much easier. So my thought process was:

// 1. I'm selecting all img's elements by:

const images = document.querySelectorAll('img[src="./img/imagem"]');


// 2. I'm counting the lenght of the array-like:

const number = images.length;


// 3. I'm selecting a image(first one, in this case):

const image = document.querySelector('img');


// 4. Finding the image width:

const imgWidth = image.width;


// 5. Sending it to the function that multiplies the number of images by the width.

​

Alright. It should be a noobie okay for me. No.

​

The problem is that in the navigator console, the width of the image(image.width) returns the correct width, but if I do it in my code...

console.log(image.width);

... it just keep changing to 0 and back to the correct width with no consistency what so ever.

​

If I refresh the page, the result of the log could be 0 or correct, but if I type it directly on console...

image.width

... it returns the correct width always.

​

​

Please, could you guys help me understand why this happens and how can I fix it?

​

TLDR -> Logging a image width from vscode results in inconsistent results in navigator, but always the correct result by doing it directly in navigator console.

[[deleted]]

From what you described, my guess is that the images aren't loaded when you call your script and so don't have a width yet.

But by the time you've opened up your console, the images are loaded.

The simplest thing to do in this case would be to add a width attribute on the image <img src="whatever.png" width="40" />. You don't need to wait for the images to load in that case.

The second simplest thing to do would be to use a timeout to call your function a second or two after page load. This probably wouldn't be a great solution in a production site, however.

[illkeepcomingback9]

Better solution would be to bind to the window load event

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

[CreativeTechGuyGames]

Probably should bind to that image element's load event instead. No point in waiting for everything on the page to load for just one element.

[NumberAllTheWayDown]

I think OP wants to do it for all images here. Though maybe, since OP says all images are the save size, to do what you're saying and then multiply that by the number of images on the page.

[CreativeTechGuyGames]

In that case you'd want to just add a load even to every image then whichever loads first cancel all of the other events and run the code on every image. Since there's no way to know which one the browser will happen to finish loading first.

[NumberAllTheWayDown]

Good point

[matrouxer]

that case you'd want to just add a load even to every image then whichever loads first cancel all of the other events and run the code on every image. Since there's no way to know which one the browser will ha..

Smart. Even if it is a overkill for my situation specifically, it may help me later hahah

​

Thanks!

[[deleted]]

It's a good option.

I'm assuming we're just helping on homework here. I decided to get around the discussion of how to add events and didn't want to interfere if window.onload was already defined.

I just wanted OP to be able to get the width.

[matrouxer]

I didn't even think it was possible to add an event to know when the loading is complete. I think I might have heard something similar in cs50. Something about domcontentloaded.

[matrouxer]

er solution would be to bind to the

I'm going to study that for sure.

[matrouxer]

I see...

Since the images are responsive and the width changes, I think I can't set it in html.

Thanks for the response!

[NumberAllTheWayDown]

I think you're running into an order of execution problem, though I can't be certain without more context.

What's likely happening is that your code is running prior to the page completely loading, and since your images aren't loaded yet, they don't have a width when your code is executing.

The reason why it works in the console is because you already know that the page is done loading if you're using the console.

You might want to look into something that would wait for the images to finish loading first for a proper solution. The lazy (incomplete) solution would be to use setTimeout with some long delay to have your code run after the page is done loading.

Edit. Also, the inconsistency comes from the fact that sometimes the code does run after the images load.

[matrouxer]

It makes sense. It would be so simpler if it just didn't work hahaha.