Javascript將click函數返回為非函數

Question

我有兩個php文件index.php和loadimages.php 。 索引頁面具有縮略圖庫和畫布。 縮略圖庫中的圖像是通過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;
  });
}

上面的代碼可以正常工作。 我想建立一個功能，其中刷新頁面時，我想虛擬地click last clicked image以便用戶在重新加載之前停留在同一圖像上。 我為此創建了一個事件偵聽器，如下所示：

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 ），您應該會很好。

順便說一句，您在這里遇到的問題稱為可變陰影 。

Answer 2

好的...我找到了問題，並為完成起見而發布了此答案，並幫助可能需要答案的人。 我的代碼中的問題是我的js中的這一行：

thumbNails.addEventListener('click', function(event) {
    pic.src = event.target.src;
  });

因為我正在調用函數中的click事件，所以window.addEventListener正在等待該單擊發生。 當我將代碼更改為此：

var clkImg = localStorage.getItem('clickedImage');
  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)
  }

  pic.src = clkImg;

一切開始正常。