<div class="row box">
<div class="col-md-4 pic"></div>
<div id="temperature" class="col-md-4 change make_blue bigger_text">
Placeholder
</div>
<div class="col-md-4">
<button id="getChange" class="make_orange bigger_text">Change units</button>
</div>
</div>
$(document).ready(function() {
navigator.geolocation.getCurrentPosition(function(position) {
var url = "https://fcc-weather-api.glitch.me/api/current?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude;
$.ajax({
url:"https://fcc-weather-api.glitch.me/api/current?lat=" + position.coords.latitude + "&lon="+ position.coords.longitude,
success: function(data) {
var temp = data.main.temp;
var icon = data.weather[0].icon;
$(".pic").html(icon);
$(".change").html(temp);
$("#getChange").on("click", function() {
$(".change").html(temp);
$("#temperature").html(changeTemp(temp));
});
}
});
});
});
I am currently facing issues while trying to display the variable "icon" in the element with the id of "pic." Any tips or suggestions on how to resolve this issue would be greatly appreciated. Thank you in advance for your assistance.