I'm trying to create a search engine using XMLHttpRequest to pull data from a JSON file. When the end-user types out a name the name of a hero populates. Once the user finds their superhero, they click on the name & the hero data will display in a new tab. When I test my site I don't receive any errors. I think a call needs to be made to the database when the page loads but I'm not sure. My JSFiddle & code are below.
https://jsfiddle.net/pcoding159/7s9ymf5L/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Search</title>
</head>
<body>
<script src = "script.js"></script>
</body>
</html>
JAVASCRIPT
// xmlRequest
xhrRequest.addEventListener('DOMContentLoaded', function (event){
xhrRequest.open('GET','https://akabab.github.io/superhero-api/api/all.json'+val);
xhrRequest.send();
console.log(xhrRequest)
});
}
// handling enter key event
document.getElementById('hero-name').addEventListener('keydown',function(event){
if(event.key.code==13){
if(heroId==0){
alert('No hero found! Try selecting the hero from the list');
}else{
showHero();
}
}
});
Thank you