Javascript 将点击函数返回为非函数

Question

我有两个 php 文件 - index.php 和 loadimages.php。索引页有一个缩略图库和一个 Canvas 。缩略图库中的图像通过 loadimages.php 填充。以下是 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 . '   "/>';
        }

上面的php代码还有一个onclick函数clickedImage。在index.php中，我有这个函数，如下所示:

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;
  });
}

上面的代码可以正常运行，没有任何错误。我想构建一个功能，当刷新页面时，我想虚拟地单击最后单击的图像，以便用户在重新加载之前停留在同一图像上。我为此创建了一个事件监听器，如下所示:

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

这不起作用，控制台返回Uncaught TypeError: clickedImage is not a function。

Answer 1

您的函数和变量都命名为clickedImage:

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

将变量重命名为其他名称(例如 clickedImageValue)，然后就可以开始了。

您在这里遇到的问题称为 variable shadowing顺便说一下。