Thermomètre en javascript Résolu/Fermé

Question

Bonjour, je dois faire un thermomètre qui change quand on appuie sur un bouton, j'ai créé une fonction qui modifie mon thermomètre qui marche bien mais je n'arrive pas à le modifier en appuyant sur les boutons. Je ne trouve pas comment prendre l'information dans CityTemperatures. Merci de m'aider.

var cityTemperatures = {
    "Arles": 8,
    "Hanoi": 14,
    "Lille": 4,
    "Nancy": 1,
    "Nîmes": 8,
    "Paris": 5,
    "Rabat": 15,
    "Tokyo": 8,
    "Tunis": 13
};

function addCityButton(city){
    var btn = document.createElement("button");
    btn.innerHTML = city; 
    btn.style.float = "left";
    btn.style.height = "100px";
    btn.style.width = "100px";
    btn.style.border = "solid grey 1px";
    btn.style.fontSize = "1,5em";
    btn.addEventListener("click", setTemperature);
    cityDiv.appendChild(btn);
}

var cityDiv = document.getElementById("cities");
for (var city in cityTemperatures){
    addCityButton(city);
}

function setTemperature(temperature){
    if (temperature > -20 && temperature < 40){
        var valueDiv = document.getElementById("temperature-value");
        valueDiv.innerHTML = temperature + "°C";
        
        var fillDiv = document.getElementById("thermometer-fill");
        fillDiv.style.height = 5*temperature+110+"px";

var colorDiv = document.getElementsByClassName("mercury");
        for (var i = 0; i < colorDiv.length; i++){
            if (temperature <= 0)
            colorDiv[i].style.backgroundColor='blue';
        else
            colorDiv[i].style.backgroundColor='red';
        }
    }
}

EDIT: correction des balises de code

jordane45 · Answer

Bonjour,

Qu'appelles tu CityTemperatures ?
C'est un site ou une api disponible sur le net ??

Je suppose que c'est une API .. et dans ce cas, il faut regarder la documentation...

jordane45 · Answer

Bonjour,

var cityTemperatures = {
    "Arles": 8,
    "Hanoi": 14,
    "Lille": 4,
    "Nancy": 1,
    "Nîmes": 8,
    "Paris": 5,
    "Rabat": 15,
    "Tokyo": 8,
    "Tunis": 13
};

function addCityButton(city,temp){
    var btn = document.createElement("button");
    btn.innerHTML = city; 
    btn.style.float = "left";
    btn.style.height = "100px";
    btn.style.width = "100px";
    btn.style.border = "solid grey 1px";
    btn.style.fontSize = "1,5em";
    btn.setAttribute("onclick","setTemperature('"+temp+"');");
      
    cityDiv.appendChild(btn);
}

function setTemperature(temperature){
    console.log(temperature);
    if (temperature > -20 && temperature < 40){
        var valueDiv = document.getElementById("temperature-value");
        valueDiv.innerHTML = temperature + "°C";
        
        var fillDiv = document.getElementById("thermometer-fill");
        fillDiv.style.height = 5*temperature+110+"px";

var colorDiv = document.getElementsByClassName("mercury");
        for (var i = 0; i < colorDiv.length; i++){
            if (temperature <= 0)
            colorDiv[i].style.backgroundColor='blue';
        else
            colorDiv[i].style.backgroundColor='red';
        }
    }
}

var cityDiv = document.getElementById("cities");
for( var city in cityTemperatures){
    console.log("city",city,"temp", cityTemperatures[city]);
    addCityButton(city,cityTemperatures[city]);
};

Thermomètre en javascript

2 réponses

Discussions similaires