jemz
October 19, 2012, 6:26pm
1
Hi, i have problem on my forloop.why is that it will not alert when i click the picture.
here is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
.rembull ul{
list-style: none;
}
ul img{
width: 100px;
}
.bodycontainer{
background: #555555;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="bodycontainer">
<div class="rembull">
<ul id="pic">
<li><img src="image/pic-1.jpg"/></li>
<li><img src="image/pic-2.jpg"/></li>
<li><img src="image/pic-3.jpg"/></li>
<li><img src="image/pic-4.jpg"/></li>
</ul>
<div>
</div>
<script>
var pic = document.getElementById("pic");
var i=0;
function loopIMG(){
for(i;i<pic.lenght;i++)
{
alert("yout click this");
}
}
pic.addEventListener("click",loopIMG,false);
</script>
</body>
</html>
Start by using the error console.
Well for starters the line “pic.lenght” is incorrect. Length is spelled wrong.
There are a couple of small issues with your code, they should become easy to identify if, as Ali suggested, you use the error console (it’s totally worth spending some time learning how to use it :)).
As Blitz mentioned, the “pic.lenght” was misspelled, so that is an obvious one to fix.
The other issue is that in your code you get a reference to the “pic” element and try to loop over it, however what happens is that “pic” only contains one element because getElementById() will only ever return a single element.
So, to fix your code what you need to do is get a reference to pic (like you already have), but then you’ll want a reference to the list elements below that. You can do this by calling getElementsByTagName(“li”) on the “pic”. e.g.
var pic, items;
pic = document.getElementById("pic");
items = pic.getElementsByTagName("li");
console.log(items);// will show you the contents of items in your error console
One other thing I’d like to point out which I think will be important moving forward from here, is that if you loop over a list of DOM elements it is important to cache the length property.
So when you start your loop you would do something like this:
var i, itemsLen;
itemsLen = items.length;
for ( i = 0; i < itemsLen; i+=1) {
//do stuff
}
jemz
October 20, 2012, 1:27pm
5
AussieJohn:
There are a couple of small issues with your code, they should become easy to identify if, as Ali suggested, you use the error console (it’s totally worth spending some time learning how to use it :)).
As Blitz mentioned, the “pic.lenght” was misspelled, so that is an obvious one to fix.
The other issue is that in your code you get a reference to the “pic” element and try to loop over it, however what happens is that “pic” only contains one element because getElementById() will only ever return a single element.
So, to fix your code what you need to do is get a reference to pic (like you already have), but then you’ll want a reference to the list elements below that. You can do this by calling getElementsByTagName(“li”) on the “pic”. e.g.
var pic, items;
pic = document.getElementById("pic");
items = pic.getElementsByTagName("li");
console.log(items);// will show you the contents of items in your error console
One other thing I’d like to point out which I think will be important moving forward from here, is that if you loop over a list of DOM elements it is important to cache the length property.
So when you start your loop you would do something like this:
var i, itemsLen;
itemsLen = items.length;
for ( i = 0; i < itemsLen; i+=1) {
//do stuff
}
Hi, Thank you for the reply…okay i will try this one and i will write back to you as soon as possible.
jemz
October 20, 2012, 1:53pm
6
Hi AussieJohn, I forgot to ask to you…is it possible to alert the name of the picture every time i click so that i will know what picture that i click.Thank you in advance.
Yeah, thats pretty trivial to do. You just need to see what the element was that was clicked and then write some conditional code to work it out.
e.g. for a simple use case you might set the click handler on the entire “pic” list and filter by tagname to make sure you only execute code when someone clicks directly on an image. You’ll need to cross-browser proof it, but it should work in most places.
var pic = document.getElementById("pic");
pic.addEventListener("click", function(e){
if (e.target.tagName === "IMG") {
console.log(e.srcElement.src);
}
});
jemz
October 20, 2012, 3:18pm
8
AussieJohn:
Yeah, thats pretty trivial to do. You just need to see what the element was that was clicked and then write some conditional code to work it out.
e.g. for a simple use case you might set the click handler on the entire “pic” list and filter by tagname to make sure you only execute code when someone clicks directly on an image. You’ll need to cross-browser proof it, but it should work in most places.
var pic = document.getElementById("pic");
pic.addEventListener("click", function(e){
if (e.target.tagName === "IMG") {
console.log(e.srcElement.src);
}
});
Hi,thank you for this…okay i will try this one…I tried the forloop but it will not alert when i am going to click.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
.rembull ul{
list-style: none;
}
ul img{
width: 100px;
}
.bodycontainer{
/*background: #555555;*/
width: 100%;
height: 100%;
position: absolute;
border: 1px solid blue;
top: 0;
left: 0;
}
#pic{
}
#zoomout{
position: relative;
left: 300px;
bottom: 300px;
width: 250px;
height: 250px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="bodycontainer">
<div class="rembull">
<ul id="pic">
<li><img src="image/pic-1.jpg"/></li>
<li><img src="image/pic-2.jpg"/></li>
<li><img src="image/pic-3.jpg"/></li>
<li><img src="image/pic-4.jpg"/></li>
</ul>
<div>
</div>
<div id="zoomout">
</div>
<script>
var pic, items;
pic = document.getElementById("pic");
items = pic.getElementsByTagName("li");
console.log(items);
console.log(document.getElementById("pic"));
var i;
var itemslen;
itemslen = pic.length;
function loopIMG(){
for(i=0;i < itemslen;i+=1)
{
itemslen[i].onclick=showThis;
}
}
function showThis(){
alert("clickme");
}
pic.addEventListener("click",loopIMG,false);
</script>
</body>
</html>
jemz
October 20, 2012, 7:21pm
9
I change the forloop to htis
function loopIMG(){
}
It’s working now it will alert
jemz
October 21, 2012, 7:17am
10
AussieJohn:
Yeah, thats pretty trivial to do. You just need to see what the element was that was clicked and then write some conditional code to work it out.
e.g. for a simple use case you might set the click handler on the entire “pic” list and filter by tagname to make sure you only execute code when someone clicks directly on an image. You’ll need to cross-browser proof it, but it should work in most places.
var pic = document.getElementById("pic");
pic.addEventListener("click", function(e){
if (e.target.tagName === "IMG") {
console.log(e.srcElement.src);
}
});
I tried this,but it gives me on this error
TypeError: e is undefined
var pic = document.getElementById(“pic”);
pic.addEventListener(“click”, function(e){
That’s weird. Is that happening in an old browser? (Do you have a sample page up somewhere for me to look at if it’s still happening? If you don’t, maybe put an example up on http://jsfiddle.net/ )
Also, I realized that srcElement is not something that’s present in all browsers, so target would be a better property to use to find the src on.
i.e.
change this line:
console.log(e.srcElement.src);
To this:
console.log(e.target.src);
jemz
October 21, 2012, 1:54pm
12
AussieJohn:
That’s weird. Is that happening in an old browser? (Do you have a sample page up somewhere for me to look at if it’s still happening? If you don’t, maybe put an example up on http://jsfiddle.net/ )
Also, I realized that srcElement is not something that’s present in all browsers, so target would be a better property to use to find the src on.
i.e.
change this line:
console.log(e.srcElement.src);
To this:
console.log(e.target.src);
I don’t know how to use this.
http://jsfiddle.net
here is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
.rembull ul{
list-style: none;
}
ul img{
width: 100px;
}
.bodycontainer{
/*background: #555555;*/
width: 100%;
height: 100%;
position: absolute;
border: 1px solid blue;
top: 0;
left: 0;
}
#pic{
}
#zoomout{
position: relative;
left: 300px;
bottom: 300px;
width: 250px;
height: 250px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="bodycontainer">
<div class="rembull">
<ul id="pic">
<li><img src="image/pic-1.jpg"/></li>
<li><img src="image/pic-2.jpg"/></li>
<li><img src="image/pic-3.jpg"/></li>
<li><img src="image/pic-4.jpg"/></li>
</ul>
<div>
</div>
<div id="zoomout">
</div>
<script>
var pic, items;
pic = document.getElementById("pic");
items = pic.getElementsByTagName("li");
console.log(items);
console.log(document.getElementById("pic"));
var i=0;
var itemslen, e;
itemslen = pic.length;
function loopIMG(){
for(i;i < items.length;i++)
{
items[i].onclick=showThis(e);
}
}
function showThis(e){
if(e.target.tagName === "IMG")
alert(e.target.src);
}
pic.addEventListener("click",loopIMG,false);
</script>
</body>
</html>
jemz
October 21, 2012, 2:18pm
13
AussieJohn:
That’s weird. Is that happening in an old browser? (Do you have a sample page up somewhere for me to look at if it’s still happening? If you don’t, maybe put an example up on http://jsfiddle.net/ )
Also, I realized that srcElement is not something that’s present in all browsers, so target would be a better property to use to find the src on.
i.e.
change this line:
console.log(e.srcElement.src);
To this:
console.log(e.target.src);
It’s working now…thank you so much.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
.rembull ul{
list-style: none;
}
ul img{
width: 100px;
}
.bodycontainer{
/*background: #555555;*/
width: 100%;
height: 100%;
position: absolute;
border: 1px solid blue;
top: 0;
left: 0;
}
#pic{
}
#zoomout{
position: relative;
left: 300px;
bottom: 300px;
width: 250px;
height: 250px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="bodycontainer">
<div class="rembull">
<ul id="pic">
<li><img src="image/pic-1.jpg"/></li>
<li><img src="image/pic-2.jpg"/></li>
<li><img src="image/pic-3.jpg"/></li>
<li><img src="image/pic-4.jpg"/></li>
</ul>
<div>
</div>
<div id="zoomout">
</div>
<script>
var pic, items;
pic = document.getElementById("pic");
items = pic.getElementsByTagName("li");
console.log(items);
console.log(document.getElementById("pic"));
var i=0;
var itemslen;
itemslen = pic.length;
pic.addEventListener("click",function(e){
if(e.target.tagName === "IMG")
alert(e.target.src);
});
</script>
</body>
</html>
