NULL set property avec innerHTML

-2

J'ai essayé de fusionner les données de l'API d'openweathermap avec l'API de google map. Cependant, chaque fois que j'essaie d'obtenir mes données à partir de l'API à l'aide innerHTML, il montre que Uncaught TypeError: Cannot set property 'innerHTML' of null.NULL set property avec innerHTML

Javascript

var map; 
 
var weather; 
 
var temp; 
 
var APPID = 'e9e239c6585f081bee7b0d7f6045a53f'; 
 

 
function updateByCity(q) { 
 
    var url = "http://api.openweathermap.org/data/2.5/weather?q={" + 
 
    q + 
 
    "}&APPID=" + APPID; 
 
    sendRequest(url); 
 
} 
 

 
function sendRequest(url) { 
 
    var xmlhttp = new XMLHttpRequest(); 
 
    xmlhttp.onreadystatechange = function() { 
 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
 
     var data = JSON.parse(xmlhttp.responseText); 
 
     var weather = {}; 
 
     weather.temp = data.main.temp; 
 

 
     update(weather); 
 
    } 
 
    }; 
 
    xmlhttp.open("GET", url, true); 
 
    xmlhttp.send(); 
 
} 
 

 

 
function update(weather) { 
 
    temp.innerHTML = weather.temp; 
 
} 
 

 
window.onload = function() { 
 
    temp = document.getElementById("temperature"); 
 
    var weather = {}; 
 
    weather.temp = "35"; 
 

 
    update(weather); 
 
} 
 

 

 
function initMap() { 
 
    var KL = { 
 
    lat: 3.1390, 
 
    lng: 101.6869 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 6, 
 
    center: { 
 
     lat: 4.444997, 
 
     lng: 106.554199 
 
    } 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: KL, 
 
    map: map 
 
    }); 
 

 

 

 
    var contentString = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Kuala Lumpur</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<p>Temperature: ' + temp + '</p>' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: contentString 
 
    }); 
 
    marker.addListener('click', function() { 
 
    infowindow.open(map, marker); 
 
    }); 
 

 
}

HTML

<!doctype> 
<html> 

<head> 
    <script src="mapJS.js"></script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuhL2_brcvjW12heXCPV8G-lXd7Kmue84&callback=initMap"> 
    </script> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
    #map { 
     height: 100%; 
    } 

    html, 
    body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    </style> 
    <div id="map"></div> 
</head> 

</html>

Source

2017-07-04 DYC

Cela devrait corriger votre null ensemble question de la propriété. La principale raison est que vous avez manqué de créer un élément pour définir vos lectures de température. Par conséquent, j'ai créé un nouveau <div id="temperature"> et il a résolu le problème.

var map; 
 
var weather; 
 
var temp; 
 
var APPID = 'e9e239c6585f081bee7b0d7f6045a53f'; 
 

 
function updateByCity(q) { 
 
    var url = "http://api.openweathermap.org/data/2.5/weather?q={" + 
 
    q + 
 
    "}&APPID=" + APPID; 
 
    sendRequest(url); 
 
} 
 

 
function sendRequest(url) { 
 
    var xmlhttp = new XMLHttpRequest(); 
 
    xmlhttp.onreadystatechange = function() { 
 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
 
     var data = JSON.parse(xmlhttp.responseText); 
 
     var weather = {}; 
 
     weather.temp = data.main.temp; 
 

 
     update(weather); 
 
    } 
 
    }; 
 
    xmlhttp.open("GET", url, true); 
 
    xmlhttp.send(); 
 
} 
 

 

 
function update(weather) { 
 
    temp.innerHTML = weather.temp; 
 
} 
 

 
window.onload = function() { 
 
    temp = document.getElementById("temperature"); 
 
    var weather = {}; 
 
    weather.temp = "35"; 
 

 
    update(weather); 
 
} 
 

 

 
function initMap() { 
 
    var KL = { 
 
    lat: 3.1390, 
 
    lng: 101.6869 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 6, 
 
    center: { 
 
     lat: 4.444997, 
 
     lng: 106.554199 
 
    } 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: KL, 
 
    map: map 
 
    }); 
 

 

 

 
    var contentString = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Kuala Lumpur</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<p>Temperature: ' + temp + '</p>' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: contentString 
 
    }); 
 
    marker.addListener('click', function() { 
 
    infowindow.open(map, marker); 
 
    }); 
 

 
} 
 

 

 
////////////////////////////////////////////////////

<!doctype> 
 
<html> 
 

 
<head> 
 
    <script src="mapJS.js"></script> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuhL2_brcvjW12heXCPV8G-lXd7Kmue84&callback=initMap"> 
 
    </script> 
 
    <title>Simple Map</title> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
    #map { 
 
     height: 100%; 
 
    } 
 
    
 
    html, 
 
    body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    </style> 
 

 
    <br> 
 
    <div id="temperature"></div><br> 
 
    <div id="map"></div> 
 
</head> 
 

 
</html>

Source

2017-07-04 03:36:58 CodeMonkey

impressionnant, merci !!! – DYC

Dans votre fonction onload, vous êtes la cible l'ID ing HTML temperature mais il n'existe pas, je pense que vous souhaitez cibler map

window.onload = function() { 
    temp = document.getElementById("map"); 
    var weather = {}; 
    weather.temp = "35"; 

    update(weather); 
}

Source

2017-07-04 03:24:40 Junaid

NULL set property avec innerHTML

Répondre

Questions connexes