14 Replies Latest reply on Oct 22, 2008 11:35 PM by kiwi_ziesch

    onClick event

    kiwi_ziesch
      I want to open a new window when I click on an image. but nothing happens when I just add an alert in the onclick-event in my image.
      the images was loaded via "browsing for files".

      elem.innerHTML = '<div style="width:200px;float:left"><img src="' + src + '" width="150" height="100" onclick="alert(src)"; /></div';

      I click and click and nothing happens. but when I load the image directly via <img>-tag everythings ok...is there a mistake in my code or what´s happening here?
        • 1. Re: onClick event
          gstewart512
          The reason it's not working is because of the way you are adding the onclick event. Just replacing the innerHTML with an onclick event does not register the event internally.

          What you need to do is specifically register the onclick event using an event listener AFTER you've inserted the new element. Something like this:

          elem.innerHTML = '<div style="width:200px;float:left"><img src="' + src + '" width="150" height="100" /></div>
          elem.addEventListener('click',function () {
          alert(elem.src);
          },false)

          If you are using a javascript library (jquery, prototype, domassistant, etc) they all have easy ways of adding event listeners.
          • 2. onClick event
            kiwi_ziesch Level 1
            I already tried this but it shows not the expected effect.
            I open the image via "browsing for files" and then create div´s and img-tags for every image. then I add the listener:

            //display the selected images
            function doSelect( e )
            {
            var elem = null;
            var name = null;
            var src = null;
            var id = null;
            var img;

            document.getElementById('list2').innerHTML = '';

            for( var f = 0; f < e.files.length; f++ )
            {
            name = e.files[f].name;

            id = 'pic' + f;
            src = e.files[f].url;
            elem = document.getElementById('list2');
            elem.innerHTML += '<div style="width:200px;float:left"><img src="' + src + '"id="'+ id +'" width="150" height="100" /></div>';
            elem.innerHTML += '<div style="width:200px;float:left"><strong>' + name + '</strong></div>';
            elem.innerHTML += '<div style="clear:left"><br /></div>';

            img = document.getElementById(id);
            air.trace(id);
            air.trace(img.id);
            img.addEventListener("click", showAlert(id), false);
            img.addEventListener("mouseover", showBorder(img), false);
            }

            }

            function showAlert(id) {

            alert(id + ' clicked');
            }

            function showBorder(img) {
            img.style.border = 'solid red 2px';
            }

            the events fire but not when I clicked the images. the alert comes when the picture is loaded from the filesystem and is loaded in my app. the border is also already set.
            any idea?
            • 3. Re: onClick event
              kiwi_ziesch Level 1
              I´ve to pick up the thread again, because I haven´t found any solution.
              The onclick-Events are now registered but don´t fire when I click.
              They fire when I load the image...

              It would be verny nice if anybody can help me out.
              Thanks.
              • 4. Re: onClick event
                cybergib15
                Try this.

                img.addEventListener("click", showAlert, false);
                img.addEventListener("mouseover", showBorder, false);
                }

                }

                function showAlert() {

                alert("hello");
                }
                • 5. Re: onClick event
                  cybergib15 Level 1
                  to take id variable just create a propriety in img

                  img.addEventListener("click", showAlert, false);
                  img.addEventListener("mouseover", showBorder, false);
                  img.id=id;
                  }

                  }

                  function showAlert() {

                  alert(img.id);
                  }
                  • 6. Re: onClick event
                    kiwi_ziesch Level 1
                    I tried your code in the following example:

                    ...
                    //path, thumb and ref_id come from database
                    var img = null;
                    img = document.createElement( 'img' );
                    img.src = path;
                    img.width = thumb_b;
                    img.height = thumb_h;
                    img.id = ref_id;
                    img.addEventListener("click", showDetail, false);

                    document.getElementById( 'view' ).appendChild( img );
                    ...

                    function showDetail() {
                    document.getElementById( 'list' ).innerHTML += "ID of the pic that was clicked: " + img.id;
                    }

                    but...img.id is not defined in showDetail...when I do this img.addEventListener("click", showDetail(img), false); then the function is called directly and not by clicking the image...
                    • 7. Re: onClick event
                      cybergib15 Level 1
                      oh yea, sorry!
                      try this



                      //path, thumb and ref_id come from database
                      var img = null;
                      img = document.createElement( 'img' );
                      img.src = path;
                      img.width = thumb_b;
                      img.height = thumb_h;

                      img.addEventListener("click", function(){ showDetail(ref_id); }));

                      document.getElementById( 'view' ).appendChild( img );
                      ...

                      function showDetail(id) {
                      document.getElementById( 'list' ).innerHTML += "ID of the pic that was clicked: " + id;
                      }



                      • 8. Re: onClick event
                        kiwi_ziesch Level 1
                        Thanks - it works.

                        Now I´ve got an other prob...
                        The data for the image comes from a database - that means it´s width, height and path.
                        I select all images in the db and display them - I add an eventlistener to each of them...when I now click on any image the last selected id is shown always. but it sould be the specific id belonging to the image.
                        here´s the code: showData() is called by clicking a simple button...

                        function showData() {
                        var ref_id = null;
                        var path= null;
                        var thumb_h = null;
                        var datum = null;
                        var result = null;
                        var list= document.getElementById('list');

                        stmt.text = 'SELECT * FROM pics';
                        stmt.execute();

                        result = stmt.getResult();

                        if( result.data != null )
                        {
                        for( var c = 0; c < result.data.length; c++ )
                        {
                        ref_id = result.data[c].ref_id;
                        path= result.data[c].path;
                        thumb_h = result.data[c].thumb_h;
                        thumb_b = result.data[c].thumb_b;

                        var img = null;
                        img = document.createElement( 'img' );
                        img.src = path;
                        img.width = thumb_b;
                        img.height = thumb_h;
                        img.id = ref_id;
                        img.addEventListener("click", function(){ alert(img.id); });

                        document.getElementById( 'list' ).appendChild( img );
                        }
                        }
                        }

                        why does any image has the same (the last selected) id? where is my error in reasoning?
                        Thanks a lot!
                        • 9. Re: onClick event
                          cybergib15 Level 1
                          i dont know where is the problem, but you should try this:

                          var img = null;
                          img = document.createElement( 'img' );
                          img.src = path;
                          img.width = thumb_b;
                          img.height = thumb_h;

                          img.addEventListener("click", function(){ alert(ref_id); });


                          just to know where is the problem
                          • 10. Re: onClick event
                            raymondralibi
                            I have the same ploblem.

                            This is my code

                            var contents = event.files;
                            var listing = document.getElementById("listdir");
                            listing.innerHTML = '';
                            for (i = 0; i < contents.length; i++)
                            {
                            var item = document.createElement("li");
                            var str = contents .name;
                            item.innerHTML = str;
                            item.addEventListener('click',function (){alert(str);});
                            listing.appendChild(item);
                            }

                            It always shows the last contents. I really have no idea. I really need some help.
                            thx a lot
                            • 11. onClick event
                              kiwi_ziesch Level 1
                              I tried a lot but I dont´t know how to solve this prob.
                              when I alert the id´s of the image before doing this:

                              img.addEventListener("click", function(){ alert(ref_id); });

                              everythings ok...all id´s are correct and so on. but just in die next line when I add the eventlistener and append the image to the DOM nothing´s fine anymore. the alert always shows the data of only the last entry.
                              In my app it goes that way:
                              click to load the images from the database
                              all id´s of the images are shown
                              all images are displayed

                              it seems that at first all id´s are processed and after that all images are displayed. but I have a for-loop and it should be that way:
                              get id - display image
                              get id - display image
                              and so on.

                              when I add a border to the clicked image, it only makes a border to the last image. but I really don´t know why.

                              can anybody help?
                              • 12. Re: onClick event
                                cybergib15 Level 1
                                if you want add me to your msn with cybergib15@hot.., we could solve the problem together
                                • 13. Re: onClick event
                                  kiwi_ziesch Level 1
                                  sorry but I don´t have msn. I´m from Germany and I think there is a lot of time shift. what about private messages in here or just mail?
                                  thanks so much
                                  • 14. Re: onClick event
                                    kiwi_ziesch Level 1
                                    did anybody solved this problem? I still have no idea what I should do to get it work...
                                    thanks in advance!