CODEWITHSUNDEEP
javascripthtml
A.J. Frio
A.J. Frio

Reputation: 1

How do you create an image that can change in JavaScript

I am working on my own version of a magic mirror and I want to have an icon that displays the weather based on the JSON data that it requested. It checks the weather every hour, and I want it to display one of the 4 icons (the icons are just png’s I photoshopped)

I have tried document.getElementById(“image”).appenedChild(img), but every time it requests data, it adds another icon next to the original. I can get the data and parse it, I just am new to creating dynamic webpages

Right now I have a function that checks the weather from OpenWeatherMap, then calls another function that sets the img.src to the correct icon file, but nothing shows up

The end goal is to either have the original icon updated or replaced when it receives new data

Upvotes: 0

Views: 72

Answers (1)

lofihelsinki
lofihelsinki

Reputation: 2571

It's easier to access the image if you give it an id.

<img id="weatherIcon" src="firstIcon.png" alt="Weather icon">

Then you can change the image's src attribute to load a different image to the element.

document.getElementById("weatherIcon").src = "secondIcon.png";

Upvotes: 1

Related Questions