Question 216002 in Javascript Question posted in
A very good W3school tutorial can be found here.

how to use javascript to change background color on condition

hi everyone i’m new so please be nice:)

–edit 2: so this is what im onto now

    colorChange: function(data) {
    console.log(data.main.temp);
    var tempColor= this.displayWeather(document.querySelector(data.main.temp).value);
    if(tempColor<=10){
        document.body.style.backgroundColor="lightgrey";
    }
    else if(tempColor>=11&&tempColor<20){
        document.body.style.backgroundColor="lightblue";
    }
    else{
        document.body.style.backgroundColor="lightcoral";
    }
}

it seems the issue is that it’s unable to find ‘temp’ and it’s returning undefined to me when i try to console.log it.

thanks everyone for all your help before >.<

–edit: i have updated the code to this point but it still does not seem to be working, any help would be appreciated–

 colorChange: function() {
    if (temp.innerText<=10){
        document.body.style.backgroundColor="lightgrey";
    }
    else if (temp.innerText> 11 && temp.innerText<20){
        document.body.style.backgroundColor="lightblue";
    }
    else{
        document.body.style.backgroundColor="lightcoral";
    }
}
Tags:

2

Answers


  1. 0

    In Javascript, functions are defined using function name(params){ ... }. If you want to grab an element from its class, you can use document.querySelector(".class"). This method grabs the first element on the page with that class though. But if you want a variable named that and not a DOM element, just type the variable as-is. I would also recommend putting your colorChange function in a loop or something else. Here is what your code would look like:

    function colorchange(){
    var tempColor = data.main.temp.value;
    if (tempColor <= 20){
        document.body.style.backgroundColor="lightblue";
    }
    else if (20 < tempColor && tempColor < 40) { //I added this in to show you how you can add more conditions, using else if.
        document.body.style.backgroundColor="blue";
    }
    else {
        document.body.style.backgroundColor="red";
    }
}
    Login or Signup to reply.
  2. 0

    In order for you to get the data, you have to fetch it from the API endpoint as follows

    let colorChange = async function () {
    const response = await fetch("https://api.openweathermap.org/data/2.5/weather?q=Denver&units=metric&appid=API_KEY");
    const data = await response.json();
    console.log(data);
    let tempColor = data.main.temp;
    if (tempColor <= 10) {
        document.body.style.backgroundColor = "lightgrey";
    }
    else if (tempColor >= 11 && tempColor < 20) {
        document.body.style.backgroundColor = "lightblue";
    }
    else {
        document.body.style.backgroundColor = "lightcoral";
    }
}

    Don’t forget to replace &appid=API_KEY with your API key

    More information on fetch can be found here and about async functions here

    I also added &units=metric as a parameter for you to receive it in Celsius

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search