Noob question about DOM and images

[canadiantodd80]

Hi guys n gals... hoping someone can help me with this.

I have a main image in my page that changes based on what the user
has selected in a dragdown box (<select><option>) type setup. That all works fine but I have another little image that says "INFO" and the onClick event for it is supposed to grab the document.getElementById("myimage").src and pass it to my identifypicture() function.

This all works great and the alert box I want shows up just fine, except that it always takes the .src which is hardcoded into the HTML document that shows up by default when a user loads the page. If the picture gets changed via the dropdown box, the old .src of the default image is still picked up via the DOM. Is there a way to use the DOM to grab the .src of the image that is currently being displayed?

Hopefully I've explained this well enough, and my thanks in advance for your help.

Cheers,
Todd

[rangana]

Show us the codes and markups involved.

[canadiantodd80]

Thanks, I'll drop it in when I get back to class tomorrow as I have the code stored there.

[rnd me]

if the code reads the .src from the dom, it should reflect the current file you see displayed.

you might be accessing it upon bootup and memorizing it at that time, while it's still the default value.

[canadiantodd80]

Alright I'm back and here's the code I'm working on.. hopefully it helps. It seems pretty basic but I can't wrap my head around why it won't grab the current .src, only the hardcoded one...

Select Scale: <select name="scale" id="scaleselect" onChange="chgMap(this.options[this.selectedIndex].value)">
<option id="500000" value="images/500000.jpg" selected="selected">1 : 500,000</option>
<option id="250000" value="images/250000.jpg">1 : 250,000</option>
<option id="50000" value="images/50000.jpg">1 : 50,000</option>
<option id="10000" value="images/10000.jpg">1 : 10,000</option>
<option id="2000" value="images/2000.jpg">1 : 2,000</option>
</select>

So this creates my dropdown box that allows me to change images between the different scales based on which option is selected... so far so good.

<img src="images/500000.jpg" width="720px" height="480px" name="mapimg" id="mapimg" />

My image hardcoded to display 500000.jpg by default... this is the .src that is always passed to my next function coming up... even if the picture has been changed using the dropdown box above.

<img border="0px" src="images/identify.gif" onClick="metaData(document.getElementById('mapimg').src)" id="ident" name="ident" />

So this is a little pic that says "Get Info" and when clicked, passes the .src of the displayed 'mapimg' picture to my metaData() function... this is where I think my problem lies, but I have no idea why...

And finally.. my function which takes the .src as an argument and uses a bunch of if/else ifs to see what .src it is and alert box accordingly.

function metaData(whichMap) {
if (whichMap = "images/500000.jpg") {
alert("Insert data here...");
}
else if (whichMap = "images/250000.jpg") {
alert("Insert data 2 here...");
}
else if (whichMap = "images/50000.jpg") {
alert("Insert data 3 here...");
}
else if (whichMap = "images/10000.jpg") {
alert("Insert data 4 here...");
}
else {
alert("Insert data 5 here...");
}
}

As you can see it's pretty simple stuff, it's only an intro to JScript course but for some reason this doesn't want to link the correct .src to my function as it always displays the result for the 1st IF statement. I'm stumped... anyone have any ideas?

Cheers
Todd

[fishluvr]

= (assignment operator -- myVar = "1")
== (is equivalent to -- myVar == 1 // true)
=== (equals strictly -- myVar === 1 // false)

[canadiantodd80]

Boy, do I feel stupid.. should have saw that as I have similar code in the page that uses the "==" comparison.

Thanks for pointing it out for me though... an extra set of eyes always helps!

[glenngv]

That's why below is a good programming practice to avoid that equality operator typo.

if (1 == myVar){
  ...
}

If in case you had if (1 = myVar), it will throw a runtime error and immediately alerts the developer that there's something wrong in the code.

BTW, if you access the src of an image, it will give you the absolute path, so the code should check for occurrence of the filename and not equality.

if (whichMap.indexOf("images/500000.jpg") != -1) {
   alert("Insert data here...");
}