Some Dom Scripting Help

[justsomeguy]

There's some weirdness going on here:

for (i=1; i<=5; i++){newGirlAnchor=new Array();newGirlAnchor[i]= getElementById('img/newgirl/newgirl_0' + i + '.jpg');newGirlAnchor[i].addEventListener('click', infoBanner, false);upAllNightAnchor=new Array();upAllNightAnchor[i]= getElementById('img/upallnight/upallnight_0' + i + '.jpg');upAllNightAnchor[i].addEventListener('click', infoBanner, false);desperateAnchor=new Array();desperateAnchor[i]= getElementById('img/desperateAnchor/desperate_0' + i + '.jpg');desperateAnchor[i]= addEventListener('click', infoBanner, false);console.log(newGirlAnchor[1]); }

First, you're re-creating the arrays every time through the loop. When the loop first runs you create newGirlAnchor as an empty array, then assign newGirlAnchor[1]. The next time, you create newGirlAnchor again as an empty array (overwriting the first one), then assign newGirlAnchor[2]. You only need to create the arrays once. Second, unless you've defined a function called getElementById, you probably want to use document.getElementById instead. In the infobanner function, send the ID of the element to the console to make sure you're getting what you think you are.

[Caitlin-havener]

Thanks. Sometimes I shock myself with the stupid mistakes I make. Does anyone know how I might be able to pull the coordinates of an image or div on the page? Instead of specifying where each modal banner appears when the shows are clicked, I'd like to just put a formula relative to the show image or show div for the "changingContentContainerDiv.style.left" and top. I have:

function infoBanner(){var titleOfCurrentAnchor = this.getAttribute('id');var changingContentContainerDiv = document.getElementById('changingContentContainer');if (titleOfCurrentAnchor == 'jayLeno'){  var episodeInfo= new Array("The Tonight Show with Jay Leno: Mon, Nov 21, 2011","Season 20 : Ep. 4150","11/21/2011","TV-PG","NBC","Dennis Miller, David \& Sean La Vau, Javier Colon.");   infoBannerContent(episodeInfo);   changingContentContainerDiv.style.left = '-10px';  changingContentContainerDiv.style.top = '-650px'; }...

[justsomeguy]

There's a writeup here about determining an element's position: http://www.quirksmode.org/js/findpos.html

[Caitlin-havener]

Cool, I'll read that.

[Caitlin-havener]

Right now, in order to make the image have a green border that has currently been clicked, I'm using the following function. Is there a way to just remove the last styling change you made instead of overriding it each time?

function greenMe(titleOfCurrentAnchor){var images=document.getElementsByTagName("img");if (titleOfCurrentAnchor=='jayLeno'){   images[2].style.borderColor = '#74b928';   images[3].style.borderColor = 'white';   images[4].style.borderColor = 'white';   images[5].style.borderColor = 'white';   images[6].style.borderColor = 'white';   images[7].style.borderColor = 'white';   images[8].style.borderColor = 'white';   images[9].style.borderColor = 'white';}else if (titleOfCurrentAnchor=='modernFamily'){   images[2].style.borderColor = 'white';   images[3].style.borderColor = '#74b928';   images[4].style.borderColor = 'white';   images[5].style.borderColor = 'white';   images[6].style.borderColor = 'white';   images[7].style.borderColor = 'white';   images[8].style.borderColor = 'white';   images[9].style.borderColor = 'white';}else if (titleOfCurrentAnchor=='upAllNight'){   images[2].style.borderColor = 'white';   images[3].style.borderColor = 'white';   images[4].style.borderColor = '#74b928';   images[5].style.borderColor = 'white';   images[6].style.borderColor = 'white';   images[7].style.borderColor = 'white';   images[8].style.borderColor = 'white';   images[9].style.borderColor = 'white';}else if (titleOfCurrentAnchor=='fringe'){   images[2].style.borderColor = 'white';   images[3].style.borderColor = 'white';   images[4].style.borderColor = 'white';   images[5].style.borderColor = '#74b928';   images[6].style.borderColor = 'white';   images[7].style.borderColor = 'white';   images[8].style.borderColor = 'white';   images[9].style.borderColor = 'white';}else if (titleOfCurrentAnchor=='newGirl'){   images[2].style.borderColor = 'white';   images[3].style.borderColor = 'white';   images[4].style.borderColor = 'white';   images[5].style.borderColor = 'white';   images[6].style.borderColor = '#74b928';   images[7].style.borderColor = 'white';   images[8].style.borderColor = 'white';   images[9].style.borderColor = 'white';}else if (titleOfCurrentAnchor=='revenge'){   images[2].style.borderColor = 'white';   images[3].style.borderColor = 'white';   images[4].style.borderColor = 'white';   images[5].style.borderColor = 'white';   images[6].style.borderColor = 'white';   images[7].style.borderColor = '#74b928';   images[8].style.borderColor = 'white';   images[9].style.borderColor = 'white';}else if (titleOfCurrentAnchor=='saturdayNight'){   images[2].style.borderColor = 'white';   images[3].style.borderColor = 'white';   images[4].style.borderColor = 'white';   images[5].style.borderColor = 'white';   images[6].style.borderColor = 'white';   images[7].style.borderColor = 'white';   images[8].style.borderColor = '#74b928';   images[9].style.borderColor = 'white';}else if (titleOfCurrentAnchor=='americanDad'){   images[2].style.borderColor = 'white';   images[3].style.borderColor = 'white';   images[4].style.borderColor = 'white';   images[5].style.borderColor = 'white';   images[6].style.borderColor = 'white';   images[7].style.borderColor = 'white';   images[8].style.borderColor = 'white';   images[9].style.borderColor = '#74b928';}}

[Caitlin-havener]

NVM think I got it

[justsomeguy]

The quickest way is to set all of them to white first, then only the selected one to green. Then you don't have to duplicate all that code.

[Caitlin-havener]

But then if you click something else, doesn't it keep the previous one clicked green?

[thescientist]

unless I am not understanding your requirements/specfications correctly, if you clear them all out first (i.e. set them to white) and then set the clicked one to green, you should never have more than one item green; the one the user just clicked on.

[dsonesuk]

you are almost repeating the same process in every if condition, why not create a function to clear all and then set the selected image border to green

function clearborder(){for (i=2;i<9;I++){images[i].style.borderColor = 'white'; }}

then

else if (titleOfCurrentAnchor=='americanDad'){clearborder(); // clear/change all to whiteimages[9].style.borderColor = '#74b928'; // change specific element border to whatever}