0

. こんにちは。このチュートリアルをモジュールとしてページに実装しようとしていますが、「weatherData.temperature is null」というエラーが表示されます。

以前は「weatherData.city is null」というエラーが発生していましたが、js で onreadystatechange を使用して修正しました。

onreadystatechange でスクリプトをラップしていなかったため、InnerHTML を null に設定しようとしていたため、エラーが発生する前にそれを取得しましたが、今では別のエラーに対して同様のエラーが発生する理由について困惑しています。コード行。

誰かが私が間違っていることを教えてくれたら、とても感謝しています! どうもありがとう！

(そうです、私の手に負えない理由で、ページ上で html と js を分離することはできません。わかっています。わかっています...)

HTML:

<div id="weather-web-app">
    <section>
        <h1 id="city">Weather Web App</h1>
        <p>
            <a href="temperature" href="#" onclick="switchUnits(); return false;" title="Click to switch between metric and imperial units">
            </a>
            <span id="weather">
                Current temperature and weather conditions
            </span>
        </p>
    </section>

</div>

JS

<script>
document.onreadystatechange = function(){
    var weatherData = {
        city:               document.querySelector("#city"),
        weather:            document.querySelector("#weather"),
        temperature:        document.querySelector("#temperature"),
        temperatureValue:   0,
        units:              "°C"
    };

    function switchUnits(){
        if (weatherData.units == "°C"){
            weatherData.temperatureValue = weatherData.temperatureValue * 9/5 + 32;
            weatherData.units = "°F";
        } else {
            weatherData.temperatureValue = (weatherData.temperatureValue - 32) * 5/9;
            weatherData.units = "°C";
        }

        weatherData.temperature.innerHTML = weatherData.temperatureValue + weatherData.units + ", ";      
    }

    function getLocationAndWeather(){
        if (window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", function() {
                var response = JSON.parse(xhr.responseText);

                console.log(response);
                var position = {
                    latitude:   response.latitude,
                    longitude:  response.longitude
                };
                var cityName = response.city;

                var weatherSimpleDescription    = response.weather.simple;
                var weatherDescription          = response.weather.description;
                var weatherTemperature          = response.weather.temperature;

                weatherData.temperatureValue = weatherTemperature;

                loadBackground(position.latitude, position.longitude, weatherSimpleDescription);

                weatherData.city.innerHTML          = cityName;
                weatherData.weather.innerHTML       = ", " + weatherDescription;
                weatherData.temperature.innerHTML   = weatherTemperature + weatherData.units;
            }, false);

            xhr.addEventListener("error", function(err){
                alert("Could not complete the request");
            }, false);

            xhr.open("GET", "https://fourtonfish.com/tutorials/weather-web-app/getlocationandweather.php?owapikey=YOUROPENWEATHERMAPKEY&units=metric", true);
            xhr.send();
        } else {
            alert("Unable to fetch location and weather data.");
        }           
    }

    function loadBackground(lat, lon, weatherTag) {
        var script_element = document.createElement('script');

        script_element.src = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOURFLICKRAPIKEY&lat=" + lat + "&lon=" + lon + "&accuracy=1&tags=" + weatherTag + "&sort=relevance&extras=url_l&format=json";

        document.getElementsByTagName('head')[0].appendChild(script_element);
    }

    function jsonFlickrApi(data){
        if (data.photos.pages > 0){
            var photo = data.photos.photo[0];
            document.querySelector("body").style.backgroundImage = "url('" + photo.url_l + "')";
            document.querySelector("#image-source").setAttribute("href", "http://www.flickr.com/photos/" + photo.owner + "/" + photo.id);
        } else {
            document.querySelector("body").style.backgroundImage = "url('https://fourtonfish.com/tutorials/weather-web-app/images/default.jpg')";
            document.querySelector("#image-source").setAttribute("href", "https://www.flickr.com/photos/superfamous/310185523/sizes/o/");
        }
    }

    getLocationAndWeather();
}
</script>
4

1 に答える 1

1

でを確認する必要がある可能性がありreadyStateますonreadystatechange。

document.onreadystatechange = function () {
    if (document.readyState === "interactive") {

        // ...

        getLocationAndWeather();
    }
};

サンプル: document.readyState

また、変更する必要があります

<a href="temperature"

に

<a id="temperature"

実行するswitchUnitsには、次のものが必要です

switchUnits = function switchUnits () {
    if (weatherData.units == "°C"){
        weatherData.temperatureValue = weatherData.temperatureValue * 9/5 + 32;
        weatherData.units = "°F";
    } else {
        weatherData.temperatureValue = (weatherData.temperatureValue - 32) * 5/9;
        weatherData.units = "°C";
    }

    weatherData.temperature.innerHTML = weatherData.temperatureValue + weatherData.units + ", ";      
};

...そのため、関数はに公開されますwindow。

于 2014-12-16T17:40:23.390 に答える