Question

您好我不明白为什么当用户输入日期时它不会更新URL。我正在为APOD采用NASA API并尝试使其具有交互性，这里的问题是，当我手动更改URL时，api数据会加载该数据，但我丢失了为什么我的用户输入数据无法正常工作。< / p>

// Go to https://api.nasa.gov/index.html#apply-for-an-api-key to get an API Key

var apodContain = document.getElementById('apod');
var API_KEY = 'XEXvzGBBdF14FSu6UZyzoPYqazSsUkSwAsI8730G';

var datePick = document.getElementById('date');
datePick.max = todaysDate();
datePick.value = todaysDate();
var date = datePick.value;

var url = 'https://api.nasa.gov/planetary/apod?api_key=' + API_KEY + '&date=' + date;


function makeApiRequest(url) {
    var myRequest = new XMLHttpRequest();
    myRequest.onreadystatechange = function () {
        if (myRequest.readyState === XMLHttpRequest.DONE) {
            if (myRequest.status === 200) {
                var responseText = myRequest.responseText;
                myRequest.onload = function () {
                    var responseJson = JSON.parse(responseText);
                    console.log(responseJson);
                    renderHTML(responseJson);
                }
            } else {
                var errorMessage = document.getElementById('error');
                errorMessage.innerHTML = "This date this not work";

            }
        }
    }

    // intializes AJAX
    myRequest.open('GET', url, true);
    myRequest.send();
};

makeApiRequest(url);

datePick.addEventListener('change', function(e){

        date = datePick.value;
        url = 'https://api.nasa.gov/planetary/apod?api_key=' + API_KEY + '&date=' + date;


})

function todaysDate() {
    var now = new Date();

    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();

    return year + '-' + month + '-' + day;
    datePicker.setAttribute("max", datePicker.value);
}

function renderHTML(data) {
    var htmlString = "";

    htmlString = "<img src = " + data.url + "></img>" + "<h1>" + data.title + "</h1>" + "<p>" + data.explanation + "</p>";
    apodContain.insertAdjacentHTML('beforeend', htmlString);
}

h1{
    text-align: center;
    font: bold;
}

h5 {
    text-align: center;
    font: bold;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    height: 500px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>INFO 343 APOD</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" type="text/css" />

    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <h1>INFO 343 APOD</h1>
    <div id="apod"></div>
    <h5>Choose your date: <input id="date" type="date"></input></h5>
    <div id="error"></div>
    
    <script src="js/app.js" type="text/javascript"></script>
</body>
</html>

Answer 1

您忘了添加

datePick.addEventListener('change', function(e){

        date = datePick.value;
        url = 'https://api.nasa.gov/planetary/apod?api_key=' + API_KEY + '&date=' + date;

        makeApiRequest(url); // <- this

})

更改日期应更改数据

1 个答案: