Get innerHtml with forEach loop

I want to get the innerHTML of h1 element here, what am I doing wrong here

39 Replies

Aldrin•2y ago

    let oshCardBlock = document.querySelector('.osh_cardsBlock')
        let oshBlockH1 = document.querySelectorAll('.osh_cardsBlock .card > h1')

        let removeLastElemment = [...oshBlockH1].slice(0, -1);
        console.log(removeLastElemment);

        removeLastElemment.forEach(block => {
            let h = block.querySelectorAll('.card h1')
            console.log(h.textContent);

        })

    let oshCardBlock = document.querySelector('.osh_cardsBlock')
        let oshBlockH1 = document.querySelectorAll('.osh_cardsBlock .card > h1')

        let removeLastElemment = [...oshBlockH1].slice(0, -1);
        console.log(removeLastElemment);

        removeLastElemment.forEach(block => {
            let h = block.querySelectorAll('.card h1')
            console.log(h.textContent);

        })

Zoë•2y ago

It's returning an array, you want block.querySelectorAll('.card h1')[0] However you should only have 1 h1 on your page so you should use document.getElementsByTagName('h1')[0]. It's also worth moving this to before the forEach because you don't need to query it on every iteration

vince•2y ago

Can't you just use document.querySelector("h1") and not need to use array syntax?

Aldrin•2y ago

i have 5 h1 and want to make changes to all 5

Zoë•2y ago

You can, but there is a method specifically for selecting tage

Aldrin•2y ago

this is what i am getting now

vince•2y ago

It's really, really recommended that you do not use 5 h1s but only 1 like ProblemSolver said It's bad for SEO if you do use more than 1 and not semantic

Zoë•2y ago

Aha, so firstly turn them into h2s, you can have many of those Secondly when looping through the removeLastElements it's already selected the h1 from them (via oshBlockH1) so you can just use block as the h1

vince•2y ago

Remove the rest syntax from oshBlockH1 The [...] I could be wrong but that might be making a 2d array

Zoë•2y ago

No it needs that

vince•2y ago

Why? Isn't it already an array

Zoë•2y ago

It's a NodeList rather than an array

Aldrin•2y ago

if i remove rest it gives this errror

vince•2y ago

Ohhh dang Yes sorry listen to ProblemSolver They know more about JS than I do haha

Aldrin•2y ago

how can i turn nodelist to array?

vince•2y ago

You already did with the rest syntax

Zoë•2y ago

That's the way I do it, using the spread operator [...document.querySelectorAll('???')] new Array(...document.querySelectorAll('???'))

vince•2y ago

You can also use Array.from() 🙂 But spread operator/rest syntax is more modern

Zoë•2y ago

I assume they all perform exactly the same, it should be something even JS can optimise out

Aldrin•2y ago

look i am getting all the h1's but its innerHtml is null

Zoë•2y ago

Is h still a NodeList?

Aldrin•2y ago

how do i extract this values

vince•2y ago

Did you try .innerText? removeLastElement.map(element => console.log(element.innerText);

Aldrin•2y ago

Aldrin•2y ago

vince•2y ago

Ah so its still a nodelist

Aldrin•2y ago

yes

vince•2y ago

Is there only one h1 inside every card?

Aldrin•2y ago

yes

vince•2y ago

My personal tool for that is block.querySelector(".card h1").innerText I still strongly advise you not to use more than 1 h1 tag for one page, they should be h3s honestly for the cards assuming they're in a section which has an h2 tag for the header

Aldrin•2y ago

tried that but i got this error

Zoë•2y ago

block should be an h1 tho, you don't need to query or select anything you already have it

vince•2y ago

You're right

Aldrin•2y ago

look this is my card element

vince•2y ago

Why are you removing the last element from it anyway if a card only has one h1?

Aldrin•2y ago

coz last h1 has different value which is not needed

vince•2y ago

Okay I think I understand now I'm on mobile so it's gonna take me a second to type up

Aldrin•2y ago

i have 6 cards all have h1 ok I got the solution, I need to loop the card instead of h1 you were right thanks 👍

vince•2y ago

Awesome 🙂

Gaming

Programming

Get innerHtml with forEach loop