fetch data from user input

Question

So i want the user to input a date into #dateUsetInput, then after they click the button i want the fetch function to grab that input and use it to fetch the appropiate image from that date. But when i do that this error appears:

VM113:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
    at getimages (index.js:16:29)
getimages @ index.js:16
await in getimages (async)
(anonymous) @ index.js:12

This is the javascript code:

/*
i want user to input a date
if the date isnt valid put message 'message not valid';
get the date and put it into the fetch function
after that put the image on the screen along with the name of the rover
*/


const button = document.getElementById('updatePic')
button.addEventListener('onclick', getimages())

async function getimages(){
const response = await fetch(`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=${document.getElementById("dateUserInput").value}&api_key=rwX3pO8mONvdxngtstqSuNfwhrwMoGTy6clxqSnu`)
const data = await response.json()
}

and this is the html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link href="styles.css" rel="stylesheet">
<script src="index.js" defer></script>

</head>
<body>
    <input type="text" id="dateUserInput">
    <button type="button" id="updatePic">Update Picture</button>
<div class="roverImage"></div>
    
</body>
</html>

What is wrong and what can i do?

Does the API return an image or a JSON object. The error indicates there is an error in the JSON returned — Jon P
– Jon P, Commented Aug 17, 2022 at 22:10
Is that your real API key? You shouldn't post that in a public forum. — Barmar
– Barmar, Commented Aug 17, 2022 at 22:11
getimages() should be getimages() in the call to addEventListener(). You're calling the function immediately, not when the user clicks the button. — Barmar
– Barmar, Commented Aug 17, 2022 at 22:12
The API URL provide, if it's correct, isn't actually working. So, you need to double check that API is working — Fadi Hania
– Fadi Hania, Commented Aug 17, 2022 at 22:12

Barmar · Accepted Answer · 2022-08-17 22:15:24Z

1

You're calling the API with an empty input value when the page is first loaded, not when the user clicks on the button.

The first argument to addEventListener is an event name. onclick is not an event, it's an HTML attribute name that corresponds to the click event.

The second argument must be a function. You're calling the function, not passing a reference to the function.

const button = document.getElementById('updatePic')
button.addEventListener('click', getimages)

async function getimages() {
  const response = await fetch(`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=${document.getElementById("dateUserInput").value}&api_key=rwX3pO8mONvdxngtstqSuNfwhrwMoGTy6clxqSnu`)
  const data = await response.json()
}

answered Aug 17, 2022 at 22:15

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

fetch data from user input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related