Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30835

Re: getElementsByClassName only inserts first image into canvas after ruby each loop

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

getElementsByClassName only inserts first image into canvas after ruby each loop plowry05@gmail.com - 2016-07-09 21:07 -0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop JJ <jj4public@vfemail.net> - 2016-07-10 20:16 +0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop howtovideos3421@gmail.com - 2016-07-10 08:40 -0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-10 08:44 -0700
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-11 01:21 +0100
    Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-15 20:59 -0700
      Re: getElementsByClassName only inserts first image into canvas after ruby each loop "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-07-16 09:21 +0200
      Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-16 13:19 +0100
        Re: getElementsByClassName only inserts first image into canvas after ruby each loop Osmo Saarikumpu <osmo@weppipakki.com> - 2016-07-17 07:32 +0300
          Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-17 13:42 +0100
            Re: getElementsByClassName only inserts first image into canvas after ruby each loop "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-07-17 15:06 +0200
              Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-17 14:20 +0100
                Re: getElementsByClassName only inserts first image into canvas after ruby each loop "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-07-17 16:02 +0200
          Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-17 05:56 -0700
        Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-17 05:51 -0700
          Re: getElementsByClassName only inserts first image into canvas after ruby each loop Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-17 14:23 +0100
  Re: getElementsByClassName only inserts first image into canvas after ruby each loop Martin Honnen <martin.honnen@gmx.de> - 2016-07-17 15:34 +0200
    Re: getElementsByClassName only inserts first image into canvas after ruby each loop patrick lowry <plowry05@gmail.com> - 2016-07-17 18:03 -0700

csiph-web