i'm trying to display my picture to my gallery div but the console shows the mistake as "uncaught (in promise) TypeError: document.getElementsByClassName(...).appendChild is not a function". I don't know what's wrong, please help me! Thank you so much!
const auth = "563492ad6f917000010000018130a0db31044cd6b83e19c30395d9e1"
const input = document.querySelector("input")
const nextBtn = document.getElementsByClassName("next")
const gallery = document.getElementsByClassName("gallery")
const searchBar = document.getElementsByClassName("searchBar")
let pageOne = 1;
let search = false;
let query = "";
input.addEventListener("input", (e) => {
e.preventDefault()
query = e.target.value
})
async function createPhotos(pageOne) {
const data = await fetch("https://api.pexels.com/v1/curated?per_page=${pageOne}", {
method: "GET",
headers: {
Accept: "application.json",
Authorization: auth
}
})
const result = await data.json()
result.photos.forEach((photo) => {
const pic = document.createElement("div")
pic.innerHTML = `<img src=${photo.src.large}/ >`
document.getElementsByClassName("gallery").appendChild(pic)
})
}
createPhotos(pageOne)<div class="container">
<div class="searchBar">
<input type="text" />
<button type="button">Search</button>
</div>
<div class="gallery"></div>
<div class='next'>Next Page</div>
</div>