SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with problem

    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.


    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

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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
      Code JavaScript:
      $("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.
      Code JavaScript:
      $("img" + imgNum).onclick = $("detailInfo").innerHTML = details[imgNum];

      In order to use an onclick event you would need to use something like the example below.
      Code JavaScript:
      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
      Code JavaScript:
      $("detailInfo").innerHTML

      should be

      Code JavaScript:
      $("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
      Code JavaScript:
      $("detailInfo")

      should be

      Code JavaScript:
      $("#detailInfo")

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

    Code JavaScript:
    $(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.

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •