RemoveChild()
Résolu
anthonyr_25
Messages postés
165
Date d'inscription
Statut
Membre
Dernière intervention
-
anthonyr_25 Messages postés 165 Date d'inscription Statut Membre Dernière intervention -
anthonyr_25 Messages postés 165 Date d'inscription Statut Membre Dernière intervention -
Bonjour, Jordane
Petite question du soir comme tout les soirs haha, en ce moment c'est tendu jte montrerai mon projet si tu veux quand il seras finni ! ;)
En fait j'ai "widget" météo sur mon site malheureusement je n'arrive pas effacer les précédentes réponses..
J'ai compris qu'il fallait surement utiliser removeChild(), mais je n'y arrive pas ..
Je t'envoie tout au cas ou l'erreur ne vienne pas que du js..
Petite question du soir comme tout les soirs haha, en ce moment c'est tendu jte montrerai mon projet si tu veux quand il seras finni ! ;)
En fait j'ai "widget" météo sur mon site malheureusement je n'arrive pas effacer les précédentes réponses..
J'ai compris qu'il fallait surement utiliser removeChild(), mais je n'y arrive pas ..
<div id="meteoo"> <div class="titre"> <h3>Météo</h3> <div id="ligne"></div> </div> <div class="widget"> <input id="queryLoc" type="text" placeholder="ex : paris" /> <input id="valider" type="button" value="" onclick="buttonClickGET()" /> </div> <div id="resultat"> <div id="icon" ><img id="wicon" src="" alt="Weather icon"></div> <br> <p id="zone_meteo"></p> </div> </div>
/* meteo */ #meteoo{ position: absolute; display: flex; flex-direction: column; margin-left: 5vh; z-index: 2; width: 90%; height: 80%; border-radius: 10px; background-color: #4C5375; visibility: hidden; } .widget{ display: flex; justify-content: row; justify-content: center; } #queryLoc{ margin-top: 10vh; border-radius: 20px; -webkit-appearance: none; width: 25vh; height: 3vh; } #valider{ margin-top: 8vh; margin-left: 8vh; width: 7vh; height: 7vh; border-radius: 50px; background-color: whitesmoke; box-shadow: 0px 0px 20px blue; cursor: pointer; } #valider:hover{ box-shadow: 0px 0px 20px whitesmoke; } #zone_meteo{ color: rgb(255, 255, 255); cursor: default; font-size: 8vh; } #wicon{ display: flex; align-items: center; justify-content: center; width: 25vh; height: 25vh; margin-bottom: 10vh; } #resultat{ height: 10vh; display: flex; align-items: center; justify-content: center; margin-top: 15vh; }
document.getElementById("resultat").style.visibility = "hidden"; var callBackGetSuccess = function(data) { let element = document.getElementById('zone_meteo'); console.log("donnees api", data) let queryLoc = document.getElementById("queryLoc").value; let newContent = document.createTextNode(queryLoc + " " + data.main.temp + " C° " + data.weather[0].main); element.appendChild(newContent); var iconcode = data.weather[0].icon; var iconurl = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/" + iconcode + ".svg"; $('#wicon').attr('src', iconurl); document.getElementById("resultat").style.visibility = "visible"; } function buttonClickGET(){ var queryLoc = document.getElementById("queryLoc").value; // api key : fe8b5facfcec5807d9bdc00e6bc4e4df var url = "https://api.openweathermap.org/data/2.5/weather?q="+queryLoc+"&appid=fe8b5facfcec5807d9bdc00e6bc4e4df&units=metric"; $.get(url, callBackGetSuccess).done(function(){ //alert( "second success" ); }) .fail(function(){ alert( "error" ); }) .always(function(){ //alert( "finished" ); }); }
Je t'envoie tout au cas ou l'erreur ne vienne pas que du js..
Configuration: Windows / Chrome 96.0.4664.110
2 réponses
Bonsoir,
Il suffit d'effacer le contenu avant d'en remettre
Il suffit d'effacer le contenu avant d'en remettre
var callBackGetSuccess = function(data) { let element = document.getElementById('zone_meteo'); element.innerHTML = ""; // on vide la div console.log("donnees api", data) let queryLoc = document.getElementById("queryLoc").value; let newContent = document.createTextNode(queryLoc + " " + data.main.temp + " C° " + data.weather[0].main); element.appendChild(newContent); var iconcode = data.weather[0].icon; var iconurl = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/" + iconcode + ".svg"; $('#wicon').attr('src', iconurl); document.getElementById("resultat").style.visibility = "visible"; }