Checking multiple innerHTMLs

With JS is there a way to select multiple innerHTMLs from several divs at once?

16 Replies

Jochem•2y ago

document.querySelectAll will grab multiple elements and stick them in an array, that you can then loop over if you want

ÆvieOP•2y ago

const adjustDay = () =>
{
    headerDate.innerHTML = Months[date.getMonth()] + ' ' + date.getDate();
    console.log(document.querySelectorAll('.selected-entry-day')[1].innerHTML)
    document.querySelectorAll('.entry-main').forEach(elem => elem.style.display = "none")
    if(document.querySelectorAll('.selected-entry-day').innerHTML === headerDate.innerHTML)
    {
        document.querySelector('.entry-main').style.display = "block"
    }
}

const adjustDay = () =>
{
    headerDate.innerHTML = Months[date.getMonth()] + ' ' + date.getDate();
    console.log(document.querySelectorAll('.selected-entry-day')[1].innerHTML)
    document.querySelectorAll('.entry-main').forEach(elem => elem.style.display = "none")
    if(document.querySelectorAll('.selected-entry-day').innerHTML === headerDate.innerHTML)
    {
        document.querySelector('.entry-main').style.display = "block"
    }
}

I'm not understanding what is happening here, when I give an index, it shows the one element when needed, but I'm not sure how to make it do it for all the elements at once

Jochem•2y ago

querySelectorAll returns an array of elements, you can't set all the innerHTMLs on it at once you have to loop over them like you do in the third line

ÆvieOP•2y ago

document.querySelectorAll('.selected-entry-day').forEach(elem => elem.innerHTML)

document.querySelectorAll('.selected-entry-day').forEach(elem => elem.innerHTML)

like this right^ this returns undefined

Jochem•2y ago

It's impossible to change all the innerHTML values all at once, you have to do the change inside the loop ForEach never returns anything, it just runs code for every iteration

vince•2y ago

elements.forEach(element => element.innerHTML = 'value');

ÆvieOP•2y ago

I have multiple created divs that I'm trying to add a date to, and have it display when the header is changed to a different date. I thought it would be best to just add to every created div a the date when it was created via innerHTML, but it won't let me check the innerhtml for that date

Jochem•2y ago

I'm not sure what you mean

ÆvieOP•2y ago

I'm making a food diary app, and I need each entry made to only display on the current date in the header

Jochem•2y ago

so you're trying to filter the list?

ÆvieOP•2y ago

yes

Jochem•2y ago

it's probably best to set the date as a data attribute on the list entry then, and use a querySelectorAll to get all of those.

const adjustDay = () =>
{
    headerDate.innerHTML = Months[date.getMonth()] + ' ' + date.getDate();
    console.log(document.querySelectorAll('.selected-entry-day')[1].innerHTML);
    document.querySelectorAll('.entry-main').forEach(elem => elem.style.display = "none");
    document.querySelectorAll('.entry-main[data-date="' + headerDate.innerHTML + '"]').forEach(elem => elem.style.display = "block");
}

const adjustDay = () =>
{
    headerDate.innerHTML = Months[date.getMonth()] + ' ' + date.getDate();
    console.log(document.querySelectorAll('.selected-entry-day')[1].innerHTML);
    document.querySelectorAll('.entry-main').forEach(elem => elem.style.display = "none");
    document.querySelectorAll('.entry-main[data-date="' + headerDate.innerHTML + '"]').forEach(elem => elem.style.display = "block");
}

all you'd have to do to get that to work is set a data-date attribute on your .entry-main elements to the right value when you create them

ÆvieOP•2y ago

I can add the date in a data attribute, but how do would I select them by the date? when I try, I get the first one every time, or node list

if(document.querySelectorAll('[date]') !== Months[date.getMonth()] + ' ' + date.getDate())
    {
        console.log(document.querySelectorAll('[date]')[1])
    }

if(document.querySelectorAll('[date]') !== Months[date.getMonth()] + ' ' + date.getDate())
    {
        console.log(document.querySelectorAll('[date]')[1])
    }

Jochem•2y ago

what I sent you thursday already selects by date and turns them back on

document.querySelectorAll('[date]') !== Months[date.getMonth()] + ' ' + date.getDate()

document.querySelectorAll('[date]') !== Months[date.getMonth()] + ' ' + date.getDate()

^ With this, I think you're assuming putting [date] in the query selector will fetch the value for the data-date attribute, but that's not true. That would select anything that has a date attribute (note that it matches ondate and not data-date) it would return all HTMLElements with that fit that selector, which is all querySelector(All) ever does

ÆvieOP•2y ago

I really appreciate the time you've taken to help me ❤️ I still feel like a noob at js after 6 months lol

Jochem•2y ago

that's what I'm here for, always glad to help 🙂 And 6 months isn't very long to learn a language, it's OK to feel like a beginner especially when a lot of people on this server have a decade or more experience

Gaming

Programming

Checking multiple innerHTMLs