Help with problem

[RyanChristiani]

Hey, i am having some problems with something pretty simple...

I am very new to javascript and I have been trying to learn from books and tutorials, etc, then i setup little projects for myself and try apply what i learn.

One little project I had was to have text display from an array when you click a link, this link would be a thumbnail image, and the text like an image title. Something simple, but for some reason is does not work.

live example here

It doesn't really seem to do anything, am I missing something?

Here is the Js code.

window.onload = init;

function init(){
	
	detailWrite();
	colImg();
}

function colImg(){

	var count = $("#images li").length; //get count of list items
	
	for(i=0; i<=count; i++){ //for loop to cycle through length of count
		detailWrite(i);	//send to detailWrite

	
	}
	
		
}
function detailWrite(imgNum){
	var details = new Array("image1","image2","image3"); //array for the info to write
	alert(imgNum);
	$("img" + imgNum).onclick = $("detailInfo").innerHTML = details[imgNum]; //place info in document.
}

Possible Help?
Thanks

[chris.upjohn]

To me it looks like you have a mixed message as to your understanding of javascript, you skip between jQuery and native javascript which is fine but the code has been written in a way which will never work. Below i have highlighted key points and supplied a full example which should work.

1. Your colImg() function is not needed as it points to the same function multiple times when detailWrite() has already been called on page load.
2. In your code you have
   

   $("img" + imgNum)

   This doesn't reference any element in the DOM as no <img> elements exist
3. The onclick event in the following snippet of code won't work as it doesn't refer to any callback functions.
   

   $("img" + imgNum).onclick = $("detailInfo").innerHTML = details[imgNum];

   
   In order to use an onclick event you would need to use something like the example below.
   

   document.getElementById('a')[0].onclick = function() {
       // Do something!
   };

4. When using jQuery its best to use the built methods to ensure 100% browser compatibility. The below snippet of your code
   

   $("detailInfo").innerHTML

   
   should be
   
   

   $("detailInfo").html();

5. When using jQuery selectors its important that you add the pound/hash or dot before the element ID or class name or the jQuery core won't be able to find the element. The below snippet of your code
   

   $("detailInfo")

   
   should be
   
   

   $("#detailInfo")

And finally to the example code, you can find all the explanations for the below methods in the jQuery online documentation.

$(function() {
    function detailWrite() {
        var details = ['image1', 'image2', 'image3'];
 
        $('a', '#images').each(function(i) {
            $(this).click(function(e) {
                e.preventDefault();
                $('#detailInfo').html(details[i]);
            });
        });
    };
 
    detailWrite();
});

If you need anymore information there are plenty of helpful people that can help more.

[RyanChristiani]

Thanks for the reply!

Yeah, my understanding of javascript is pretty basic right now...I was trying to use just native javascript, but when I first encountered my problems someone was saying i should try jquery...when i get some time I will try this out, and probably come back with many more questions!

Thanks