[Solved] Trouble Using Variable in GetElementById

[ruby76]

I’m trying to use the “infobox” Google Maps plugin (basically a replacement for the default info windows that pop up when you click on a location), and I’ve managed to get the code to do most of what I want, but I’m stuck on something that feels super simple.

I set up the marker locations then call the function to create the infobox, which plugs in content from a div on the page using getElementById — this works just fine if I put the exact div ID in quotes, but not if I feed it a variable. Using the variable won’t bring up the content of the div with that ID. (I’ve tested to make sure the variable is being passed to the function successfully, and that part is OK.)

See this pen, line 65: http://codepen.io/ruby76/pen/ORjQwR

I thought changing it to document.getElementById(selected).value might help, but that seems to break part of the functionality — it stops going through the full loop to add all map markers, and still doesn’t plug in the content of that div.

The site in progress is here: http://easthowesteps.com/new/v4

(That one is referencing a div ID in quotes, so each marker is pulling up the same infobox content.)

Any ideas what I can do to get this to accept a variable? Thanks for any help!

[Alex Zaworski]

Hi,

I’m seeing this in the console when clicking one of the pins on your map:

Uncaught ReferenceError: loc is not defined

Which may be the error that’s preventing everything from working.

At any rate, passing a variable into getElementById is definitely valid, it’s kinda tough to guess what all’s going wrong. Do you have console logs before/after you can share?

[ruby76]

Whoops – I deleted that reference to loc (thanks!) but sadly that didn’t prevent the problem. I cleaned up a couple of other minor things that were showing up in the console, but now it’s just completely clean, at least in Chrome. I updated the pen link from above.

Neither passing the variable or the actual div value (“ehs”) produce any errors – the only difference is that the variable version gives me a blank popup box, and the “ehs” plugs in the content. But when I add that “.value” at the end, I do get a console error that it can’t read the property value of null.

Does that point to any other errors that you can think of?

Thanks so much for looking into this with me.

[Alex Zaworski]

Hmm well it sounds like the id doesn’t exist on any DOM elements. I’d start by verifying that whatever selected is equal to is actually the id you’re looking for.

[ruby76]

Hmm, the names do match, but maybe there’s a better way to check? I just set up an alert to pop up the value of “selected” at the beginning of the infobox function – it does go through all 4 of them and they match the names of the divs. If I take that a step further and ask it to pop up document.getElementById(selected), it starts saying [object HTMLDivElement] for each one. If I do document.getElementById(selected).value, then it’s “undefined.”

It feels like even though the right variables are plugging in, it still can’t find the div. It’s on the same page and everything (http://easthowesteps.com/new/v4). Any other suggestions for how to crack this?

I updated the pen with the HTML code as well: http://codepen.io/ruby76/pen/ORjQwR

Thanks for your help!

[Alex Zaworski]

Oh! Are you trying to get the content of the div? You want .innerText not .value— does that fix it?

.value is for input elements.

[ruby76]

Oh wow, that definitely made a difference, thank you! I apparently still have one more problem in that it’s just pulling in the div content for the 4th location on all 4. I have a loop that creates each marker, then calls the function to create the infobox with the “selected” div’s contents. Can you tell from the JS code how I seem to be creating the same infobox each time?

Sorry for the multi-question thread! Thanks so much for looking into this for me.

[Alex Zaworski]

It’s hard to say without being able to play around with it. It looks like what might be happening is since you’re not creating a new variable inside the MakeInfoWindow function you end up modifying a global infobox each time the function is run.

Try changing it to var infobox = new InfoBox instead of just infobox = new InfoBox, maybe?

[ruby76]

Oh my goodness, what a difference those three little letters made. That makes perfect sense and worked like a charm. Thank you so much! (I hope it’s registering that I’m clicking “good answer” every time I do.) You are my hero. :)

[Alex Zaworski]

Hey no problem, happy to help :) Glad it’s up n’ running.

[Author]

Posts