I am struggling with getting my results from an API to show up on HTML page. Does work if the function is executed in the console.
<body>
<div>
<form>
<input type="text" id="search" placeholder="Enter person">
<input type="submit" value="Submit" name="submit" onclick="fetchPerson()" />
</form>
</div>
<div id="app"></div>
function fetchPerson() {
var input = document.getElementById('search').value;
fetch(`notrevealingapi/api/name=${input}`)
.then(res => res.json())
.then(data => {
console.log(data);
const html = data.data
.map(hit => {
return `<p>Hits: ${hit.person}</p>`;
})
.join("");
document.querySelector('#app').insertAdjacentHTML("afterbegin", html);
})
}
If I understand your need correctly.
you want to populate the result in the <div id="app"> when a user clicks on the submit button.
There is two basic mistakes I can think of.
button type instead of submitinnerHTML instead of the insertAdjacentHTML. So it would look likedocument.querySelector('#app').innerHTML = html