javascript - How can I change an image source based on text content?

I'm making a weather app and wanted to have an image based on what the weather is. When I tried to do this, the image stayed blank.

Here is my code:
JS:

let button = document.querySelector('.button')
let inputLocation = document.querySelector('.location')
let temp = document.querySelector('.temp');
let desc = document.querySelector('.desc');
let image = document.getElementById("image");


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

    fetch(`.5/weather?q=${inputLocation.value}&units=metric&appid=9f5cf42409938f351c3a005bbc01773f`)
        .then(response => response.json())
        .then(
            displayData)
        .catch(err => alert('Not a city name.'));

},

function changeImg() {
    image.src = "images/" + desc.textContent + ".svg";
    console.log(image.src);

})

const displayData=(weather)=>{
    temp.innerText=`${weather.main.temp.toFixed(0)}°C`
    desc.innerText=`${weather.weather[0].main}`

}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css">
    <script src="main.js" defer></script>
    <script src=".js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="input" id="input">
        <input type="text" class="location" id="location" placeholder="Location">
        <button class="button" id="button"><i class="fas fa-search"></i></button>
    </div>
    <div class="image">
        <image id="image"></image>
    </div>
    <div class="output" id="output">
        <h1 class="temp" id="temp">˚C</h1>
        <p class="desc" id="desc"></p>
    </div>
</div>
</body>
</html>

I tried to change the weather to lowercase then make that my image source:
image.src = "images/" + desc.textContent.toLowerCase() + ".svg";
But that also didnt work. It also doesn't give any errors.

I'm making a weather app and wanted to have an image based on what the weather is. When I tried to do this, the image stayed blank.

Here is my code:
JS:

let button = document.querySelector('.button')
let inputLocation = document.querySelector('.location')
let temp = document.querySelector('.temp');
let desc = document.querySelector('.desc');
let image = document.getElementById("image");


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

    fetch(`https://api.openweathermap./data/2.5/weather?q=${inputLocation.value}&units=metric&appid=9f5cf42409938f351c3a005bbc01773f`)
        .then(response => response.json())
        .then(
            displayData)
        .catch(err => alert('Not a city name.'));

},

function changeImg() {
    image.src = "images/" + desc.textContent + ".svg";
    console.log(image.src);

})

const displayData=(weather)=>{
    temp.innerText=`${weather.main.temp.toFixed(0)}°C`
    desc.innerText=`${weather.weather[0].main}`

}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css">
    <script src="main.js" defer></script>
    <script src="https://kit.fontawesome/cdcbf8161c.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="input" id="input">
        <input type="text" class="location" id="location" placeholder="Location">
        <button class="button" id="button"><i class="fas fa-search"></i></button>
    </div>
    <div class="image">
        <image id="image"></image>
    </div>
    <div class="output" id="output">
        <h1 class="temp" id="temp">˚C</h1>
        <p class="desc" id="desc"></p>
    </div>
</div>
</body>
</html>

Share Improve this question asked Jan 18 at 10:56 viper 451 silver badge6 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 2

The image element in HTML is called <img>. I don't know why you need the extra function, you can just set the src attribute in the display() function.

let button = document.querySelector('.button');
let inputLocation = document.querySelector('.location');
let temp = document.querySelector('.temp');
let desc = document.querySelector('.desc');
let image = document.getElementById("image");

button.addEventListener('click', function() {
  fetch(`https://api.openweathermap./data/2.5/weather?q=${inputLocation.value}&units=metric&appid=9f5cf42409938f351c3a005bbc01773f`)
    .then(response => response.json())
    .then(displayData)
    .catch(err => alert('Not a city name.'));

});

const displayData = (weather) => {
  temp.innerText = `${weather.main.temp.toFixed(0)}°C`
  desc.innerText = `${weather.weather[0].main}`
  image.src = `images/${weather.weather[0].main}.svg`;
}

<script src="https://kit.fontawesome/cdcbf8161c.js" crossorigin="anonymous"></script>

<div class="container">
  <div class="input" id="input">
    <input type="text" class="location" id="location" placeholder="Location">
    <button class="button" id="button"><i class="fas fa-search"></i></button>
  </div>
  <div class="image">
    <img id="image">
  </div>
  <div class="output" id="output">
    <h1 class="temp" id="temp">˚C</h1>
    <p class="desc" id="desc"></p>
  </div>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I change an image source based on text content? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)