how to get the image name on click in javascript

Question

I am creating a grid of images and I would like to return the image name when the user clicks on the image. My code always returns the name of the last image

(I can work around this using the index but I would like to know what is going on)

last_image = -1
var next_button = document.getElementById('next-image');
var all_button = document.getElementById('all-images');
document.addEventListener("DOMContentLoaded", (event) => {
  allImages()
});

function allImages() {
  for (let index = 0; index < 5; index++) {
    var canvas_name = "display-" + index
    var image_name = 'image_' + index + '.png'
    drawImage(canvas_name, image_name)
    var cell = document.getElementById('display-' + index)
    cell.onclick = function() {
      cellClick(index, image_name)
    };
  }
}

function drawImage(canvas_name, image) {
  let imageObj = new Image();
  imageObj.name = canvas_name;
  imageObj.onload = function() {
    let canvas = document.getElementById(this.name);
    let ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0, 0);
  };
  imageObj.src = image;
}

function cellClick(index, image_name) {
  console.log(index, image_name)
}

<div class="display-grid">
  <span><canvas class="canvas" id="display-0"></canvas></span>
  <span><canvas class="canvas" id="display-1"></canvas></span>
  <span><canvas class="canvas" id="display-2"></canvas></span>
  <span><canvas class="canvas" id="display-3"></canvas></span>
  <span><canvas class="canvas" id="display-4"></canvas></span>
</div>

getElementById('next-image') ?

Roko C. Buljan
– Roko C. Buljan

2021-07-25 08:09:03 +00:00
Commented Jul 25, 2021 at 8:09 — Roko C. Buljan
– Roko C. Buljan, Commented Jul 25, 2021 at 8:09
Fixed missing character:)

Psionman
– Psionman

2021-07-25 08:09:11 +00:00
Commented Jul 25, 2021 at 8:09 — Psionman
– Psionman, Commented Jul 25, 2021 at 8:09

Professor Abronsius · Accepted Answer · 2021-07-25 08:49:10Z

Unless you really need to add numerically indexed IDs to each of the canvas elements you can remove them. They will have an index when processed using querySelectorAll which can then be used, if you wish, to build the image src (ie: image_0.png etc

By passing the canvas as an argument to drawImage and returning the canvas you can assign the event listener within allImages and access the newly assigned name of the canvas - effectively the src of the image passed to the drawImage` method.

For ease of viewing rather than blank images I used a placeholder but you'll see the commented out original. In the original code the clickhandler, when invoked, used the last index because the loop had already been run rather than picking an index from the current clicked item.

document.addEventListener("DOMContentLoaded", ()=>{
    const next_button=document.getElementById('next-image');
    const all_button=document.getElementById('all-images');
    const col=document.querySelectorAll('.display-grid span canvas');
    
    const allImages=function(){
        col.forEach((cnvs,i)=>{
            //let src='image_'+i+'.png';
            let src='http://placekitten.com/452/450?image='+i;
            cnvs=drawImage( cnvs, src );
            cnvs.addEventListener('click',function(e){
                alert(this.name)
            })
        })
    }
    
    function drawImage( canvas, src ) {
        let oImg = new Image();
        oImg.onload = function() {
            canvas.name=src;
            let ctx = canvas.getContext('2d');
            ctx.drawImage( this, 0, 0 );
        };
        oImg.src = src;
        return canvas;
    }
    
    allImages()
});

span{display:block;border:1px solid red;padding:1rem;margin:0.25rem auto;}
canvas{border:1px solid black;margin:1rem;}
img{border:1px solid blue;}

<div class="display-grid">
  <span><canvas></canvas></span>
  <span><canvas></canvas></span>
  <span><canvas></canvas></span>
  <span><canvas></canvas></span>
  <span><canvas></canvas></span>
</div>

<input type='button' id='next-image' value='Next' />
<input type='button' id='all-images' value='All' />

Roko C. Buljan · Accepted Answer · 2021-10-11 18:36:33Z

0

Store the src into the Canvas EL data-* attribute
Get all your canvas elements using Element.querySelectorAll()
Iterate your Canvas Elements using Nodelist.prototype.forEach()
PS: instead of using DOMContentLoaded just make sure to always use <script> tags right before the closing </body> tag (so not in HEAD or disseminated around your document).

const canvases = document.querySelectorAll('.display-grid canvas');

document.addEventListener("DOMContentLoaded", allImages);

function allImages() {
  canvases.forEach((EL, i) => {
    EL.dataset.src = `https://via.placeholder.com/100/?text=Image-${i}`;
    drawImage(EL, i);
    EL.addEventListener("click", () => canvasClick(EL, i));
  });
}

function drawImage(EL, i) {
  const img = new Image();
  img.addEventListener("load", () => {
    const ctx = EL.getContext('2d');
    ctx.canvas.width = img.naturalWidth;
    ctx.canvas.height = img.naturalHeight;
    ctx.drawImage(img, 0, 0);
  })
  img.src = EL.dataset.src
}

function canvasClick(EL, i) {
  console.log(i, EL.dataset.src);
}

canvas {
  border: 3px solid red;
}

<div class="display-grid">
  <span><canvas class="canvas"></canvas></span>
  <span><canvas class="canvas"></canvas></span>
  <span><canvas class="canvas"></canvas></span>
  <span><canvas class="canvas"></canvas></span>
  <span><canvas class="canvas"></canvas></span>
</div>

edited Oct 11, 2021 at 18:36

answered Jul 25, 2021 at 8:28

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

2 Comments

Psionman Over a year ago

Your line: const canvas = document.getElementById(canvas_id); canvas_id is not defined anywhere

Roko C. Buljan Over a year ago

@Psionman you have eagle eyes. Thank you, fixed

Collectives™ on Stack Overflow

how to get the image name on click in javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related