Question

我正在尝试构建一个Web功能，允许用户使用此处的信息选择一个时间窗口来查看本地地震信息。 https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php

正如你在这里看到的那样，（https://codepen.io/JoshTheGray/pen/yPmJeR）当我静态地为我想要的任何时间段分配url变量时，我正在成功解析信息，但是我在尝试使url变量变化时遇到了麻烦，基于用户按钮单击。

我的HTML

<div>Please select a window of time to see Earthquake information.</div>
<br>

<button id="1HourButton">Past Hour</button>
<button id="1DayButton">Past 24 Hours</button>
<br>
<br>


<div id="output1">Earthquakes Around the State<br><br></div>
<br>

我的JavaScript / JQuery

;(function($){
    $( document ).ready(function() {
        // testing document load state
        console.log( "document loaded" );
    var output1 =document.getElementById('output1');
    var hr = new XMLHttpRequest();
    // Asigns url based on button choice from user.
    var url = '';

    $('#1HourButton').click(function () {
        url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson';
        console.log(url);
    });
    $('#1DayButton').click(function () {
        url = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson';
        console.log(url);
    });

    hr.onreadystatechange = function() {
        if(this.readyState === 4 && this.status === 200){
            var myObj = JSON.parse(hr.response);

            for(i=0; i < myObj.features.length; i++) {
        if (myObj.features[i].properties.title.includes("Alaska")) {
                output1.innerHTML += myObj.features[i].properties.title + '<br>';
        }
            }
        }
    }

    hr.open("GET", url, true);
    hr.send();

    });
})(jQuery);

=========================

目前我看到按钮点击后传递给控制台的正确URL信息，但json信息不再出现。

我错过了什么？

使用JQuery / JavaScript按钮单击更改变量

0 个答案: