Solution 1 :

If I am not mistaken I do not see anywhere in your Java Script where you change the <img> src.


You can change the src by simply getting that element then setting it’s source like blow:

document.getElementById("myImg").src = png;

This is assuming you add an id of "myImg" to the <img> tag like so:

<img class="image" src="" id="myImg">

I did not realize you already got the element earlier on so all you need to do is:

img.src = png;

Problem :

So, i am trying to add an img element from openweatherAPI, that shows an icon relative to what is found in the JSON results when the user gets the current web stats from typing a city, (i.e an image of scattered clouds, clear skies, etc). in order to display the img, i understand i need to paste the url into the “src” section of the img tag. the URL would look something like:

 const png = "" + icon + "@2x.png"

however, in order to make this dynamic, the img tags “src” would have to change based on what the image file is from the typed in city.

I have the logic defined from the “icon” and “png” variables in the js file. My question is, how to i get the html img ‘src’ to populate with the results of my “png” variable, based on the city the user inputs on the page?

I have included both html and javasript codes below

const button = document.querySelector(".button")
const inputValue = document.querySelector(".inputValue")
const name = document.querySelector(".name")
const desc = document.querySelector(".desc")
const temp = document.querySelector(".temp")
const img = document.querySelector(".image")

button.addEventListener('click', function (){

    fetch(''+ inputValue.value +'&units=imperial&appid=61dcc0033e94c4172d2bb94bb607fc5d')
.then(response => response.json())
.then(data => {
    const nameValue = data['name']
    const tempValue = data['main']['temp']
    const descValue = data['weather'][0]['description']
    const icon =[0].icon
    const png = "" + icon + "@2x.png"

    name.innerHTML = nameValue
    temp.innerHTML = tempValue
    desc.innerHTML = descValue
    img.innerHTML = 

.catch(err => alert("Wrong City name!"))
<!DOCTYPE html>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    <div class="input">
        <input type="text" class="inputValue" placeholder="Enter a city">
        <input type="submit" value="submit" class="button">


    <div class="display">
        <h1 class="name"></h1>
        <p class="desc"></p>
        <p class="temp"></p>
        <img class="image" src="">

    <script src='main.js'></script>


Comment posted by Karan Singh

img.src = png;

Comment posted by Papa_Gepetto

that is my question. How to i get the contents of src=” ” on the HTML file, to populate with the results of the “png” variable?