I have a function that uses getElementById and it has been working great. Now I have a page where I call it more than once on the page. The first one works but the rest don't. What do I need to do to make multiples work on one page?
 

5 hours ago, gigman7 said:

I have a function that uses getElementById and it has been working great. Now I have a page where I call it more than once on the page. The first one works but the rest don't. What do I need to do to make multiples work on one page?
 

You can use `getElementById` or the more modern `querySelector` as many times as you wish.  You are probably passing it an ID that doesn't exist at the time it is invoked.  assign the result of it to a variable and log it to the console.

56 minutes ago, rbrtsmith said:

You can use `getElementById` or the more modern `querySelector` as many times as you wish.  You are probably passing it an ID that doesn't exist at the time it is invoked.  assign the result of it to a variable and log it to the console.

Yeah I agree to this instead of calling several times assign it to a variable and so the process of calling becomes really easy.

Are you using the same ID multiple times? Its good practice to have unique IDs within the DOM

17 hours ago, Chris Day said:

Are you using the same ID multiple times? Its good practice to have unique IDs within the DOM

Yes, because each page is different and my have one, two, or twenty or more.

Um, would this work with jQuery? I'm pretty shocking with javascript really. ID should always be unique, two of the same and they should use a class.

On 7/28/2018 at 4:15 AM, gigman7 said:

Yes, because each page is different and my have one, two, or twenty or more.

Using duplicate IDs on a single page is invalid markup.

I have made a quick example of how a few different selectors work: https://jsfiddle.net/ksyxmo12/12/

While you're learning different ways to target selectors, I'd also have a look at the difference between Arrays and NodeLists. This caught me out when I was learning the DOM API because they appear to be the same at first glance. There's a good article about this here https://toddmotto.com/a-comprehensive-dive-into-nodelists-arrays-converting-nodelists-and-understanding-the-dom/

On 7/30/2018 at 11:34 AM, Jack said:

While you're learning different ways to target selectors, I'd also have a look at the difference between Arrays and NodeLists. This caught me out when I was learning the DOM API because they appear to be the same at first glance. There's a good article about this here https://toddmotto.com/a-comprehensive-dive-into-nodelists-arrays-converting-nodelists-and-understanding-the-dom/

You typically want to convert nodelists into real arrays if you are going to forEach, map or filter them etc. 
 

[].slice.call(document.querySelectorAll('.nodes')).forEach(el => el.innerHTML = 'baz');

 

Edited July 31, 20188 yr by rbrtsmith

1 minute ago, rbrtsmith said:

You typically want to convert nodelists into real arrays if you are going to map or filter them etc. 
 

[].slice.call(document.querySelector('.nodes')).filter(someFilterFunction)

 

Yeah, this is even shorter in ES6 with the spread operator.

const arr = [...document.querySelectorAll("li")]

It's important to know the difference though.

1 minute ago, Jack said:

Yeah, this is even shorter in ES6 with the spread operator.

const arr = [...document.querySelectorAll("li")]

It's important to know the difference though.

True that, I use spread all the time It's a great feature.