Path: csiph.com!eternal-september.org!feeder.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: Ben Bacarisse <ben.usenet@bsb.me.uk>
Newsgroups: comp.lang.javascript
Subject: Re: getElementsByClassName only inserts first image into canvas after ruby each loop
Date: Mon, 11 Jul 2016 01:21:07 +0100
Organization: A noiseless patient Spider
Lines: 30
Message-ID: <87lh192ff0.fsf@bsb.me.uk>
References: <3397987e-7925-4c49-8a94-d5f12a152223@googlegroups.com>
Mime-Version: 1.0
Content-Type: text/plain
Injection-Info: mx02.eternal-september.org; posting-host="017616aa25f81ec581c44d76d61ba2f3"; logging-data="10543"; mail-complaints-to="abuse@eternal-september.org";	posting-account="U2FsdGVkX1/r6y+9dYS49L4ujexVRPpJDWJw0ZtV7ek="
Cancel-Lock: sha1:0P7XL6hDxXYF2z5Rb+ezXOYSfOc= sha1:RTTC+jjWkYvkVJja/bn1YWlamSU=
X-BSB-Auth: 1.0e8d64b47cfa7bef00bf.20160711012107BST.87lh192ff0.fsf@bsb.me.uk
Xref: csiph.com comp.lang.javascript:30835

plowry05@gmail.com writes:

> I am using the Ruby Carrierwave gem and Fabric.js in my canvas app. I use CarrierWave to assist on storing my images in the database and I use Ruby's .each iterator to display the images on the page(see below). It works great.
>
> <canvas id="canvas" width="300" height="550"></canvas>
>
>  <% @images.each do |m| %>
>   <%= image_tag m.photo_pic.url, :class => "my-image",  %>
>  <% end %>
>
> I then use a javascript function and fabric.js to display the images in my canvas.(see below) It works, However no matter what image I click it always displays the FIRST image into the canvas.For Example, if I click the 10th image that is displayed the first image will always be added to the canvas. I would like to click any image and have that particular image display in the canvas. Im not sure why getElementsByClassName only grabs the first image iterated  
>
> var canvas = new fabric.Canvas('canvas');
>  $(".my-image").on('click',function() {
>   var imgElement = document.getElementsByClassName("my-image")
>   var imgInstance = new fabric.Image(imgElement, {
>    left: 50,
>    top: 50,
>  });
>  canvas.add(imgInstance);
>  });

Looks like a lot of work (I've seen the correction you've posted).  The
normal way to operate on the clicked element is to access it though the
event object that is usually passed to the event handler.  But you seem
to be using a library (JQuery?) and I don't know anything about its
event handling.

-- 
Ben.