更改日期应改变数据

你好，我不明白为什么当用户输入日期它不会更新URL。我正在为APOD采取NASA API并试图使其交互，这里的问题是，当我手动更改URL时，api数据会加载该数据，但我失去了为什么我的用户输入数据不适用于它。更改日期应改变数据

// 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>

。

来源

2017-10-28 Zubair Amjad

请更新你的答案和解决您的JavaScript代码段。片段可让您将HTML，CSS和Javascript全部包含在一个块中。 – Soviut

好吧我已经修好了 –

你忘了添加

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

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

     makeApiRequest(url); // <- this 

})

来源

2017-10-28 21:16:36

谢谢！我不知道我是如何忽略这一点的 –

更改日期应改变数据

回答

相关问题