PDA

View Full Version : "getElementsByTagName" problem

newboy
04-16-2003, 07:22 AM
I have a problem with getElementsByTagName & attachEvent.
I want to attach a event to all my <img> tags sample this

<html>
<body>
<img name="image1" src="pic1.jpg">
<img name="image2" src="pic2.jpg">
<img name="image3" src="pic3.jpg">
<script>
function func1(name) { alert(name) }

Images = document.getElementsByTagName('img')
for(i=0;i<Images.length;i++)
Images[i].attachEvent("onmouseover",function(){func1(this.name)})

</script>
</body>
</html>

but it doesn't work right, I tested "Images[i].name" instead "this.name",but it doesn't work too.
any help? thanks
joeframbach
04-16-2003, 01:02 PM
i might be wrong because i haven't posted in a while!
try putting function(){func1(this.name)} in quotes:
"function(){func1(this.name)}"
newboy
04-16-2003, 07:46 PM
thank you joeframbach.

I tested putting function(){func1(this.name)} in quotes,
but I couldn't get a result yet. :(
Roy Sinclair
04-16-2003, 08:16 PM
This works:


<html>
<body>
<img id="image1" src="pic1.jpg">
<img id="image2" src="pic2.jpg">
<img id="image3" src="pic3.jpg">
<script>
function func1(name)
{
alert(name)
}
var Images = document.getElementsByTagName('img')
for(i=0;i<Images.length;i++)
Images[i].attachEvent("onmouseover",function(){func1(this)})
</script>
</body>
</html>


One problem with your original script is that "name" isn't a valid property for images. Another is that the object being passed to the function func1 isn't the image object.
newboy
04-17-2003, 04:18 AM
thanks Roy Sinclair.
can you tell me why "object being passed to the function func1 isn't the image object".

this code isn't my orjinal code , in fact I want to add a onload event to all my <img> tags , for example alert the image src in onload it.
I tested "document.images" too like this

<html>
<body>
<img id="image1" src="pic1.jpg">
<img id="image2" src="pic2.jpg">
<img id="image3" src="pic3.jpg">
<script>
function func1(name)
{
alert(name)
}
for(i=0;i<document.images.length;i++)
document.images[i].attachEvent("onload",function(){func1(document.images[i].src)})
</script>
</body>
</html>

All is right , what is wrong!!?
Roy Sinclair
04-17-2003, 04:52 PM
The "this" in the first version of your code refers to the active object at the time and not to the image, I believe it was the window object.

In your second version, you are telling it to call func1 using document.images[i].src as a parameter. Be aware that you are creating a function which will be called later and only when the event that calls the function occurs. When that function is finally called as the onload event occurs it then executes the code inside the function and that's when "document.images[i].src" is evaluated but by then "i" no longer has the value you expect it to have because the loop has finished.

What you need to do is use the event object instead, the event object has a reference to the object which triggered the event.


<html>
<body>
<img id="image1" src="1.gif">
<img id="image2" src="2.gif">
<img id="image3" src="3.gif">
<script>
function func1(name)
{
alert(name)
}
for(i=0;i<document.images.length;i++)
document.images[i].attachEvent("onload",function(){func1(event.srcElement.src)})
</script>
</body>
</html>
ConfusedOfLife
04-17-2003, 08:17 PM
Originally posted by Roy Sinclair
This works:


<html>
<body>
<img id="image1" src="pic1.jpg">
<img id="image2" src="pic2.jpg">
<img id="image3" src="pic3.jpg">
<script>
function func1(name)
{
alert(name)
}
var Images = document.getElementsByTagName('img')
for(i=0;i<Images.length;i++)
Images[i].attachEvent("onmouseover",function(){func1(this)})
</script>
</body>
</html>


One problem with your original script is that "name" isn't a valid property for images. Another is that the object being passed to the function func1 isn't the image object.

It doesn't work for me! I tested the onmouseover event handler without attachEvent and it's working fine. Something like this:

<html>
<body>
<img id="image1" src="pic1.jpg">
<img id="image2" src="pic2.jpg">
<img id="image3" src="pic3.jpg">
<script>
function func1(name)
{
alert(name)
}
var Images = document.getElementsByTagName('img')
for(i=0;i<Images.length;i++)
Images[i].onmouseover = function() { func1(this.id) }
//Images[i].attachEvent("onmouseover",function(){func1(this.id)})
</script>
</body>
</html>


So, whatever it is, it's with that damn attachEvent! It's also IE proprietary and I don't think using it is that wise!

I also don't think that we ever need to know the index of our tag among all the other similiar nodes when we have this. If you wana do anything with your element, you can do it with this, if you wana do something with the other elements, well, you have to find them and do whatever you wana do, just normal coding.