So at the moment my code only removes and adds the "invisible" class to the elements that were selected by their ID. I want to select certain elements that are in the "data" array. Is there a way to select an entire selection of elements based on if they have a certain CSS class?
let editBtn
let deleteBtn
//Declares element variables
function htmlHandle(data) { //takes in the data that was fetched from my server and maps it
postsContainer.innerHTML = data.map(item => {
return `
<div class="post-container">
<a class="a" href='/'><h3 class="author">${item.author}</h3></a>
<div class="date">${item.date.toLocaleString()}</div>
<button id="optionsBtn" class="options-btn"><i class="fas fa-ellipsis-v" style="color: gray;"></i></button>
<button id="editBtn" class="inside-btn invisible">Edit</button><button id="deleteBtn" class="inside-btn invisible">Delete</button>
<br>
<button class="inside-btn invisible">Delete</button>
<p class="body-text">${item.body}</p>
</div>
`
}).join('')
}
fetch('/api/data')
.then(res => res.json())
.then(data => {
data.sort(function(a,b){
return new Date(b.date) - new Date(a.date);
})
htmlHandle(data)
editBtn = document.querySelector("#editBtn")
deleteBtn = document.querySelector("#deleteBtn")
let activeTwo = false
document.addEventListener("click", e => {
if (e.target.classList.contains("options-btn")) { //Selects the elements with the "options-button" through the "e" parameter
if (!activeTwo) {
editBtn.classList.remove("invisible")
deleteBtn.classList.remove("invisible")
activeTwo = true
} else {
editBtn.classList.add("invisible")
deleteBtn.classList.add("invisible")
activeTwo = false
}
}
})
})
Right now all this code is doing is remove and adding the invisible class for only the first item in the array. This makes sense since they were selected by their ID.