RemoveChild()
Résolu
anthonyr_25
Messages postés
172
Statut
Membre
-
anthonyr_25 Messages postés 172 Statut Membre -
anthonyr_25 Messages postés 172 Statut Membre -
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 remettrevar 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"; }
-
Je savais que c'était pas si compliqué ....
Merci beaucoup Jordane !