Update img src using javascript

1

I have this small code:

<img id="icon" src="https://www.w3schools.com/tags/smiley.gif" alt="Smiley face" height="42" width="42">

$(window).bind("load", function () {
  document.getElementsByClassName("icon").src = "http://via.placeholder.com/42x42";
  console.log(document.getElementsByClassName("icon").src);
});

I am using this logic in my project "Show the Local Weather Incomplete " but I can update the image, any idea… according to the log, the src is Ok, but not rendered in the HTML…

The goal is put the proper icon or image after get the wheater conditions…

Full project: https://codepen.io/aasanchez/pen/ZxYWJg

2

document.getElementsByClassName returns an array.

Also, icon isn’t the class of your image.

4

You are looking for a lass name when there is only and ID

Also what is the intent on using jQuery for the binding of an event but then using raw JS?

It’s best to be consistent when choosing languages - although mixing is okay in some instances.

JQuery is great for selecting elements so I’d stick with that… but if learning I would recommend doing as much as you can in plain JS so you know and understand why and when to use jQuery.