Javascript返回点击功能不是一个功能

Question

I have two php files - index.php and loadimages.php. The index page has a thumbnail gallery and a canvas. The images to thumbnail gallery is populated through loadimages.php. The following is the snippet of the code from loadimages.php:

for ($i=0; $i<count($files); $i++)
{
    $num = $files[$i];
    $filname = basename($num, ".jpg");
    $filnam = substr($filname, -5);
    echo '<figure class="item">';
    echo '<img class="matchImages" onclick="clickedImage(this.id)" src="'.$num.'" id="thumbNails' . $filnam . '   "/>';
        }

The above php code also has an onclick function clickedImage. In the index.php, i have this function which is as follows:

function clickedImage(clicked_id) {
  localStorage.setItem("clickedImg", clicked_id);
  var clickedImg = document.getElementById(clicked_id).src;
  var clickedImg = clickedImg.replace(/^.*[\\\/]/, '');
  var canvas = document.getElementById("mycanvas");
  var ctx = canvas.getContext("2d");
  var thumbNails = document.getElementById("loaded_img_panel");
  var pic = new Image();
  pic.onload = function() {
    canvas.width = pic.width;
    canvas.height = pic.height;
    ctx.drawImage(pic, 0,0)
  }
  thumbNails.addEventListener('click', function(event) {
    pic.src = event.target.src;
  });
}

The above code works without any errors. I want to build in a functionality where when the page is refreshed, I want to virtually click on the last clicked image so that the user stays on the same image before reload. I have created a eventlistener for this which is as follows:

window.addEventListener('load', function() {
   var clickedImage = localStorage.getItem('clickedImg');
   clickedImage(clickedImage); 
  })

This is not working, and the console returns Uncaught TypeError: clickedImage is not a function.

Answer 1

Both your function and your variable are named clickedImage:

var clickedImage = localStorage.getItem('clickedImg');
clickedImage(clickedImage); 

Rename the variable to something else (e.g. clickedImageValue) and you should be good to go.

The problem you experience here is called variable shadowing, by the way.