Home/ Questions/Q 6596633
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:06:04+00:00

I have problem with putting in the right parameters from an eventListener into a

  • 0

I have problem with putting in the right parameters from an eventListener into a function.

  <!DOCTYPE html>
   <html>
    <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script type="text/javascript">         

           window.onload = function() {
            var galleryContainer = document.getElementById('galleryContainer');
            var image = galleryContainer.getElementsByTagName('div');
            //console.log(image);

            var images = new Array();
            images.push(image);

            for(var i = 0; i < images[0].length; i++) {
                images[0][i].addEventListener('click', function() {showImage(this)
                }, false);
               };
           }
    // I dont know with parameter to put into showImage() from the listener.
           function showImage( here is the problem ) {

            var preview = document.getElementById('preview');
            preview.innerhtml = image.innerhtml;
   // I want to put the image into the preview element.

          }
    </script>
</head>
<body>
    <div id="galleryContainer">
        <div>trams</div>
        <div>trams</div>
        <div>trams</div>
        <div>trams</div>
    </div>
    <div id="preview" style="width: 200px; height: 200px; border: 1px solid red"></div>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this code:

    <!DOCTYPE html>
   <html>
    <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script type="text/javascript">         

           window.onload = function() {
             var galleryContainer = document.getElementById('galleryContainer');
             var images = galleryContainer.getElementsByTagName('div');
             //console.log(images);

             for(var i = 0; i < images.length; i++) {
               images[i].addEventListener('click', showImage, false);
             };
           }
// I dont know with parameter to put into showImage() from the listener.
           function showImage(ev) {
             ev=ev||event; // ev now point to click event object
             var preview = document.getElementById('preview');
             preview.innerHTML = this.innerHTML; // this point to DIV(trams)
           }
    </script>
</head>
<body>
    <div id="galleryContainer">
        <div>trams1</div>
        <div>trams2</div>
        <div>trams3</div>
        <div>trams4</div>
    </div>
    <div id="preview" style="width: 200px; height: 200px; border: 1px solid red"></div>
</body>

    Working example http://jsfiddle.net/Cp6HJ/

    • 0