输入正确参数的问题

Question

I have problem with putting in the right parameters from an eventListener into a function. 我在将正确的参数从eventListener放入函数时遇到问题。

  <!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>

Answer 1

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/ 工作示例http://jsfiddle.net/Cp6HJ/

Answer 2

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++) {
            var callback = function(item){ return function(){ showImage(item); }; }(images[0][i]);
            images[0][i].addEventListener('click', callback, false);
         };
       };

       function showImage( item ) {
        var preview = document.getElementById('preview');
        preview.innerHTML = item.innerHTML;
      }

Answer 3

Use this for the function definition statement : 将此用于函数定义语句：

function showImage(image) { 
   ...
}

And correction in the inner html statement: (note the capitalized 'H') 并在内部html语句中进行更正：（请注意大写的“ H”）

preview.innerHTML = image.innerHTML;

输入正确参数的问题

问题描述

3 个解决方案

解决方案1
0 已采纳 2011-09-22 11:22:05

解决方案2
0 2011-09-22 11:48:59

解决方案3
-1 2011-09-22 11:21:17

输入正确参数的问题

问题描述

3 个解决方案

解决方案1 0 已采纳 2011-09-22 11:22:05

解决方案2 0 2011-09-22 11:48:59

解决方案3 -1 2011-09-22 11:21:17

解决方案1
0 已采纳 2011-09-22 11:22:05

解决方案2
0 2011-09-22 11:48:59

解决方案3
-1 2011-09-22 11:21:17