Win a copy of Spring in Action (5th edition) this week in the Spring forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Bear Bibeault
  • Devaka Cooray
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Knute Snortum
  • Junilu Lacar
  • paul wheaton
Saloon Keepers:
  • Ganesh Patekar
  • Frits Walraven
  • Tim Moores
  • Ron McLeod
  • Carey Brown
Bartenders:
  • Stephan van Hulst
  • salvin francis
  • Tim Holloway

getting information from a clicked image  RSS feed

 
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I'm not a programmer, but I'm trying to create a simple advent calendar for some students.

The idea is I have a tree (background image) and on the tree I place ornaments. Each ornament is a separate png graphic that is clickable.

How do I know which image is being clicked? I searched around and I found the get attributes attr() feature but I seem to be using it incorrectly as it only seems to grab the info from the first graphic loaded.


in HTML file
       

in SCRIPT FILE



So, this will bring up an alert with '3' no matter which one I click. Eventually, I want to use that information to display the proper question ... if I get that far!

Any help to point me in the right direction is greatly appreciated!
 
Sheriff
Posts: 23867
50
Eclipse IDE Firefox Browser MySQL Database
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Jonathan, welcome to the Ranch!

I've added your post to the forum where JavaScript questions are usually found... if my JS skills were up to date I'd give it a try myself, but there's plenty of other people here with JS skills.
 
Marshal
Posts: 67163
169
IntelliJ IDE Java jQuery Mac Mac OS X
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The jQuery selector $('img') matches any element of type img, so you're getting a matched set of all images. Since attr() only operates on a single element, it's giving you the value of the first image. Always.

Your post contains little context. Is getInfo() called from a click handler? If so, inside a click hander, the clicked element is found via this.

So, something like: would be more likely what you are looking for. But you need to be careful, the value of this is per function, so why do you have a separate getInfo() function in the first place? Why not just do this work in the click handler?

P.S. This is a misuse of alt which has its own distinct purpose. If you are going to use an attribute for your own purposes, I suggest you use a custom attribute. In HTML5, custom attributes start with "data-", so you can create any that you like, data-fred, for example, where "fred" can be anything that you want (and makes sense for what you are using it for).

P.P.S. If you are just looking for a distinct id for each image, you already have that in the id attribute. Why add another?
 
Jonathan Hamelin
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks for the replies! I tried to find the right place to post my question, but I guess I didn't get it right.

I really appreciate the responses! Just to make sure you understand WHY I did some of these things, I really want to be clear. I am NOT a programmer! I did a short course online with khan academy to get started and I've been messing around a bit in my spare time but not consistently, so I'm always forgetting what I've learned.

I thought it would be nice to put an easy advent calendar online for some of my young students. I first made a ton of separate pages realizing it was a mistake (but it was easy because I could just use hyperinks). I then thought it would be better to put the data in an array and use just one page, but that would require some programming. *sigh*.

It took me a long time to just figure out how to pass the information with the getInfo command, but obviously, I don't know what I'm doing. Yes, I hijacked the alt tag, but to be fair, they were just dates of the images anyway, and I used numbers instead of ordinals.... ie) 3 instead of 3rd. So, really...it was kind of the same! I eventually found this command: var imageName = (event.target.alt); which I used and it seems to work. Maybe it's the same thing you suggested?

Anyway, my code file is fairly short and simple so hopefully it won't break. It's just a simple advent calendar anyway! You can see what I did here: http://www.greenwood-ac.com/christmas/Christmas.html

I'll be taking it down in the new year, so it won't be there in 2019.


If you really want to see the code, I'll include all the code and webpage, but I warn you it's not 'pretty'. But...it's working!


 
Jonathan Hamelin
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This is my code. I couldn't send it as an attachment.

 
Jonathan Hamelin
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Finally, my CSS file
 
Today you are you, that is turer than true. There is no one alive who is youer than you! - Seuss. Tiny ad:
Download Free Java APIs to Work with Office Files and PDF
htttp://www.e-iceblue.com/free-apis.html
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!