getting information from a clicked image

[Jonathan Hamelin]

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
       <a href="#">            <img onclick="getInfo()" class="ornament row5 col2" src="graphics/3.png" alt="3">        </a>                <a href="#">            <img onclick="getInfo()" id="fourth" class="ornament row3 col8" src="graphics/4.png" alt="4">        </a>                <a href="#">            <img onclick="getInfo()" id="fifth" class="ornament row4 col6" src="graphics/5.png" alt="5">        </a>

in SCRIPT FILE

function getInfo() {    var imageName = $('img').attr('alt');    alert(imageName); }

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!

[Paul Clapham]

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.

[Bear Bibeault]

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:

$(this).attr('alt')

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]

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!

<html>
    <!DOCTYPE html>
    <head>
    <title>Christmas Quiz</title>
    <meta charset = "utf-8">
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src=mycode.js></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
        <script src="jquery.snow.js"></script>
    </head>


    <body>
        <div>
        <a href="#">
            <img id="3" onclick="getInfo()" class="ornament row5 col2" src="graphics/3.png" alt="3">
        </a>
        
        <a href="#">
            <img onclick="getInfo()" id="fourth" class="ornament row3 col8" src="graphics/4.png" alt="4">
        </a>
        
        <a href="#">
            <img onclick="getInfo()" id="fifth" class="ornament row4 col6" src="graphics/5.png" alt="5">
        </a>
        
        <a href="#">
            <img onclick="getInfo()" id="sixth" class="ornament row10 col3" src="graphics/6.png" alt="6">
        </a>
    
        <a href="#">
            <img onclick="getInfo()" id="seventh" class="ornament row5 col10" src="graphics/7.png" alt="7">
        </a>
    
        <a href="#">
            <img onclick="getInfo()" class="ornament row9 col4" src="graphics/10.png" alt="10">
        </a>
        
        <a href="#">
            <img onclick="getInfo()" class="ornament row1 col5" src="graphics/11.png" alt="11">
        </a>
        
        <a href="#">
            <img onclick="getInfo()" class="ornament row9 col10" src="graphics/12.png" alt="12">
        </a>
        
        <a href="#">
            <img onclick="getInfo()" class="ornament row8 col6" src="graphics/13.png" alt="13">
        </a>
        
        <a href="#">        
            <img onclick="getInfo()" class="ornament row9 col0" src="graphics/14.png" alt="14">
        </a>
        
        <a href="#">        
            <img onclick="getInfo()" class="ornament row7 col8" src="graphics/17.png" alt="17">
        </a>
        
        <a href="#">        
            <img onclick="getInfo()" class="ornament row5 col4" src="graphics/18.png" alt="18">
        </a>
        
        <a href="#">        
            <img onclick="getInfo()" class="ornament row10 col7" src="graphics/19.png" alt="19">
        </a>
        
        <a href="#">
            <img onclick="getInfo()" class="ornament row7 col3" src="graphics/20.png" alt="20">
        </a>
        
        <a href="#">
            <img onclick="getInfo()" class="ornament row3 col3" src="graphics/21.png" alt="21">
        </a>
        
        <a href="../index.html">
            <img onclick="getInfo()" class="logo" src="graphics/GWFavicon.png" alt="home">
        </a>
        </div>
        <div id="question">Click an Ornament</div>
        <a id="answer" onclick="answer()" href="#">Answer</a>
        
        <script>
$(document).ready( function(){
    $.fn.snow();
});
</script>
    </body>
</html>

[Jonathan Hamelin]

This is my code. I couldn't send it as an attachment.

/******************************************************
 * Christmas Advent Calendar Program                  *
 *                                                    *
 *                                                    *
 * Written by Jonathan Hamelin (newbie programmer)    *
 * December 5th, 2018                                 *
 ******************************************************/
 
 // Declare the arrays
 
 var altId = ["3", "4", "5", "6", "7", "10", "11", "12", "13", "14", "17", "18", "19", "20", "21"];

 var dates = ["3rd", "4th", "5th", "6th", "7th", "10th", "11th", "12th", "13th", "14th", "17th", "18th", "19th", "20th", "21st"];
 var engQuestion = ["I come with many colors, so beautiful and bright, I turn so many houses into a beautiful sight. What am I?", "What do you look forward to that’s filled with stuff and that looks like a giant persons sock?", "If the end of the year is on December 31st, then what is the end of Christmas?", "What did the doctor tell the Christmas bell when he walked into the hospital?", "What do you call an elf dancing with earmuffs on?", "I go up and I go down, I am blazing and hot. If you look right at me, your eyes will wish you had not. What am I? ", "I can be white or dark, I am sweet and sometimes bitter and you see me on a cupcake or in a cookie. What am I?", "You can slice and dice me, peel and chop me, cut me, cook me and I might make you cry. What am I? ", "I am always there for you, following you around like my best friend, copying everything you do, and lot of times you see me on the ground. What am I?", "I am a very hot ball up in the sky. I twinkle and shine, look small and bright? What am I?", "Kids, elders and a monster love me, I’m mostly round and brown if you ask me. What am I?", "What has a head, tail, large feet, a pocket and is named Joey?", "I can be liquid or solid, sometimes I bubble and you can find me in every home. What am I?", "I go up and I go down, sometimes I am curvy and sometimes I am straight. What am I?", "People usually come see me almost every single day and often many times a day. Despite this, people often consider me to be very dirty. Even though I will never speak to anyone, people will always show me a part of themselves that they rarely show to anyone else. What am I?"];
 var japQuestion = ["わたしにはたくさんのいろがついていて、とてもきれいでかがやいているよ。わたしはたくさんのいえをきれいにみえるようにするの。わたしはなあに？", "そのなかにたくさんのものがはいっているのがたのしみな、おおきいひとがはくようなものってなあに？", "1年のおわりが12月31日なら、クリスマスのおわりはなあに？", "クリスマスベルがびょういんにいったとき、おいしゃさんがいったことはなあに？", "イヤーマフ（みみあて）をつけておどっているこびとをなんてよぶ？", "わたしはあがったりさがったりするし、あつかったりもえていたりするよ。もしわたしをただしく見たら、あなたの目が、みなければよかったとねがうことでしょう。わたしはなあに？", "しろかったりくろかったり、あまかったり、ときどきにがかったり、そしてカップケーキのうえやクッキーのなかにもみることができるよ。わたしはなあに？", "わたしをスライスしたり、さいの目にきったり、かわをむいたり、きったり、りょうりしたりできるよ。ひょっとしたらそれであなたはないちゃうかも。わたしはなあに？", "わたしはいつもそばにいて、しんゆうのようにあなたのまわりをついてまわるし、あなたがすることはなんでもまねするよ。あなたはわたしをじめんのうえではみることができるよ。わたしはなあに？", "わたしはそらのうえではとってもあついの。わたしはぴかぴかひかったり、かがやいたり、ちいさくみえてひかるよ。わたしはなあに？", "こどもやおとしより、モンスターもわたしのことがだいすき。わたしはだいたいまるくて、ちゃいろ。わたしはなあに？", "あたま、しっぽ、おおきなあしとポケットがひとつあって、なまえはジョーイっていうの。わたしはなあに？", "えきたいにもこたいにもなるし、たまにあわになったり。おうちでみつけることができるよ。わたしはなあに？", "あがったりさがったり、ときどきまがってたりまっすぐだったり。わたしはなあに？", "みんないちにちにいっかいか、もっとわたしにあいにくる。なのにたくさんのひとが、わたしはとてもきたないとおもっている。わたしからみんなにはなしかけることがなくても、みんなはわたしに、ほかのひとにはめったにみせないからだのいちぶをいつもみせるの。わたしはなあに？"];
 var engAnswer = ["Christmas Lights", "Stockings", "The letter 's'", "If you don't get any better with this medicine, give me a ring.", "you can call him anything you want because he cannot hear you anyway.", "The Sun", "Chocolate", "An onion", "Your shadow", "A Star", "Cookies", "A kangaroo", "Soap", "Stairs", "A toilet"];
 var japAnswer = ["クリスマスライト、イルミネーション", "クリスマス ソックス", "アルファベットの「S」", "この薬を服用しても良くならなかったら、電話（のベルを鳴ら）してください。", "耳当てをしていて聞こえないので何と呼んでもいい。", "太陽", "チョコレート", "玉ねぎ", "あなたの影", "星", "クッキー", "カンガルー", "石鹸", "階段", "トイレ"];


var day = new Date().getDate();
var webPage = "a" + day + ".html";
var positionGlobal = null;

function getInfo() {
    
    // this is pulling the alt tag information from the clicked object (onclick).
    var imageName = (event.target.alt);
    
    // figure out the position of element
    var position = altId.indexOf(imageName);

    $("#question").html(engQuestion[position]+"<br>"+japQuestion[position]);
    positionGlobal = position;
}

function answer() {
    
    if (positionGlobal != null && altId[positionGlobal] <= day) {
        $("#question").html(engAnswer[positionGlobal] + "<br>" + japAnswer[positionGlobal]);
    } else if (positionGlobal != null) {
        $("#question").html("Come back on December " + dates[positionGlobal] + " to see the answer.");
        }
    
}

[Jonathan Hamelin]

Finally, my CSS file

.logo {
    position: absolute;
    width: 60px;
    height: 60px;  
}
        

body {
    
    
}
  
:root {
    --x: 100px;
    --y: 50px;
}

body {
        font-family: arial, sans-serif;
        font-size: 1.5em;
        display: block;
        background-image: url("graphics/tree.png");
        background-size: 480px 640px;
        background-color:  midnightblue;
        background-position: 100 50;
        background-repeat:no-repeat;
        
        }

.logo {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;  
}

.ornament {
    position: absolute;
    width: 50px;
    height: 60px;
}

.row0 {
    top: calc(var(--y) + 0px);

}
.row1 {
    top: calc(var(--y) + 120px);

}
.row2 {
    top: calc(var(--y) + 162px);

}
.row3 {
    top: calc(var(--y) + 204px);

}
.row4 {
    top: calc(var(--y) + 246px);

}

.row5 {
    top: calc(var(--y) + 300px);

}

.row6 {
    top: calc(var(--y) + 330px);

}
.row7 {
    top: calc(var(--y) + 360px);

}
.row8 {
    top: calc(var(--y) + 414px);

}
.row9 {
    top: calc(var(--y) + 456px);

}
.row10 {
    top: calc(var(--y) + 540px);

}

.col0 {
    left: calc(var(--x) + 10px);
}

.col1 {
    left: calc(var(--x) + 46px);            
}

.col2 {
    left: calc(var(--x) + 50px);
}

.col3 {
    left: calc(var(--x) + 118px);
}
.col4 {
    left: calc(var(--x) + 154px);
}

.col5 {
    left: calc(var(--x) + 190px);
}

.col6 {
    left: calc(var(--x) + 226px);
}

.col7 {
    left: calc(var(--x) + 262px);
}

.col8 {
    left: calc(var(--x) + 298px);
}

.col9 {
    left: calc(var(--x) + 334px);
}

.col10 {
    left: calc(var(--x) + 370px);
}

.col11 {
    left: calc(var(--x) + 406px);
}

.col12 {
    left: calc(var(--x) + 440px);
}
h1 {
    text-align: center;
}

.english {
    color: darkslategray;
}

.japanese {
    color: lightslategrey;
}

.japanese:hover {
    color: brown;
}



.finished {
    font-size: .7em;
    color: gray;
}

a {
    text-decoration: none;
    color: white;
}

a:hover {
    color: green;
}

.on {
    display: block;
    color: blue;
}

.off {
    display: none;
}

.done {
    display: block;
    color: lightgrey;
}

#question {
    font-size: 1em;  
    color: burlywood;
    margin: 700px 10px 10px 10px;
}

#answer {
    padding: 5px;
    background: darkblue;
    border-color: pink;
    border-right: 0;
    opacity: 0.8;
    height: 45px;
    max-width: 200px;
    border-radius: 10px;
    margin: 10px;
    text-align: center;
    vertical-align: middle;
    font-size: 1.5em;
    pointer-events: fill;    
    color: white;
    margin-top: px;
}	



#answer:hover {
    background-color: blue;
    color: black;
}

[Daniel Demesmaecker]

I checked your advent callendar. When I click one of your ornaments, nothing happens.
When I open the browser console this is the error:

ReferenceError: event is not defined[Meer info] mycode.js:25:9
getInfo
http://www.greenwood-ac.com/christmas/mycode.js:25:9
onclick
http://www.greenwood-ac.com/christmas/Christmas.html:1:1

What are you trying to do actually?
If you need to know which image is being clicked why not just pass the value to your method?

[Daniel Demesmaecker]

You could try something like this (I only maded three objects cause I was to lazy to copy paste everything but you get the gist ):

let quiz = [{}];
let obj;
function createArray(){
    quiz = [
        {
        id: "3",
            date: "3rd",
            questionEnglish: "I come with many colors, so beautiful and bright, I turn so many houses into a beautiful sight. What am I?",
            questionJap: "わたしにはたくさんのいろがついていて、とてもきれいでかがやいているよ。わたしはたくさんのいえをきれいにみえるようにするの。わたしはなあに？",
            answerEng: "Christmas lights",
            answerJap: "クリスマスライト、イルミネーション"
    },
        {
            id: "4",
            date: "4th",
            questionEnglish: "What do you look forward to that’s filled with stuff and that looks like a giant persons sock?",
            questionJap: "そのなかにたくさんのものがはいっているのがたのしみな、おおきいひとがはくようなものってなあに？",
            answerEng: "Stockings",
            answerJap: "クリスマス ソックス"
        },
        {
            id: "5",
            dates: "5th",
            questionEnglish: "If the end of the year is on December 31st, then what is the end of Christmas?",
            questionJap: "1年のおわりが12月31日なら、クリスマスのおわりはなあに？",
            answerEng: "The letter s",
            answerJap: "アルファベットの「S」"
        }
    ];
}

function getInfo(id){
    obj = quiz[id];
    $("#question").html(obj.questionEnglish + "<br>" + obj.questionJap
}

    function answer() {
        let day = new Date().getDate();
        if (obj != null && obj.id >= day) {
            $("#question").html(obj.answerEng + "<br>" + obj.answerJap);
        } else if (obj != null) { 
            $("#question").html("Come back on December " + obj.id + " to see the answer.");
        }
}

In your html's body tag put onload(createArray) and when calling the getInfo method pas the index of the array so 3rd december would be getInfo(0), 4th december getInfo(1) and so on...

[Daniel Demesmaecker]

Lol, I only see now that this post is over a week old, so most ikely you won't need it anymore.

[Jonathan Hamelin]

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.