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!
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?
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?
Lol, I only see now that this post is over a week old, so most ikely you won't need it anymore.
It's good to be able to use someting, it's better to understand how it works.
posted 1 year ago
Hi Daniel, thanks for the information. I wanted to pass the value onto the function but I really don’t know what I’m doing. I was also trying to do an array like you suggested but I couldn’t figure out the proper syntax and I didn’t want to retype the heading parts over and over again.
Anyway, I suppose I should have said that I got it to work for Chrome and Explorer but when I tried Firefox it wouldn’t do anything but I don’t know why.
What happens in Chrome is that the question pops up for the appropriate day. If you click on answer, it will show up only if it’s the same day or
Earlier but not for future dates.
I’ll see if I can do it your way and change it for next year or if I plan to make something else that’s similar.