Javascript returns click function as not a function

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.

`clickedImage` is not a function, because it is a value from localStorage. Seriously, how do you expect js to understand which `clickedImage` should be used in `clickedImage(clickedImage)`? — u_mulder, Jun 19 '18 at 08:08
@u_mulder Since I am saving the returned imageid in localstorage, and the clickedImage function takes the imageid as an argument, I was hoping that I would be able to read them...not sure if my understanding is correct — Apricot, Jun 19 '18 at 08:25
@u_mulder despite changing the variable name...I am still getting the same error...do you have any thoughts? — Apricot, Jun 19 '18 at 09:17

score 1 · Answer 1 · answered Jun 19 '18 at 08:09

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.

answered Jun 19 '18 at 08:09

idmean

14,540
9
54
83

thank you for your response....I tried changing the variable name....still not working and getting the same message – Apricot Jun 19 '18 at 09:16

score 0 · Answer 2 · edited Apr 25 '23 at 11:21

I figured out the issue. The problem in my code was in this line within my js:

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

Because I was invoking a click event within my function, the window.addEventListener is waiting for that click to happen. When I changed my code to this:

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;

everything started working fine.

Javascript returns click function as not a function

2 Answers2