JS img click function is not defined

Question

I am trying to make sure that when I click an image

<div id="getImage" class="gallery_grid_item md-card-content">
<img onClick="handleImage()" src ="img.png">
</div>

<div id="holdImage">
</div>

then it is placed into another div

function handleImage() {
        var $img = $("#getImage").children("img");
        $("#holdImage").append($img);
    }

However, I've double and triple checked this but the function still shows as undefined in the console?

What's going on here?

You forgot the closing " in <img onClick="handleImage() src ="img.png"> — Mamun
– Mamun, Commented Mar 20, 2019 at 13:23
also "getImage" implies your targetting an element. You probably forgot to add the id or class specifier (#, or . ) — Nick Parsons
– Nick Parsons, Commented Mar 20, 2019 at 13:28
@Mamun I've added # but unfortunately the quote was just a typo on here. still no luck — Geoff_S
– Geoff_S, Commented Mar 20, 2019 at 13:44

ADH - THE TECHIE GUY · Accepted Answer · 2019-03-20 14:03:46Z

2

it was caused by something that you missed and I correct all of that

$("getImage") is replaced by $("#getImage") ,(you missed one # here)
onClick="handleImage() is replaced by onClick="handleImage()" ,(you missed one " here)
var $img is replaced by var img (you don't need to have a $ sign to declare a variable in js.

function handleImage() {
            var img = $("#getImage").children("img");
            $("#holdImage").append(img);
        }

#getImage{
width:50px;
height:100px;
border:1px solid #000;
}
#getImage>img{
width:100%;
height:100%;
}

#holdImage{
width:100px;
height:200px;
border:1px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="getImage" class="gallery_grid_item md-card-content">
    <img onClick="handleImage()" src ="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" >
 </div>

    <div id="holdImage">
    </div>

edited Mar 20, 2019 at 14:03

answered Mar 20, 2019 at 13:58

ADH - THE TECHIE GUY

4,4134 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Geoff_S Over a year ago

Would it be causing problems for me if that html is inline in a JS function like this:

function appendSomeItems(url, id, name, style) {             return '<div><div class="md-card md-card-hover">         <div id="getImage" class="gallery_grid_item md-card-content"> <img onClick="handleImage()" class ="uk-align-center"></a>                               <div class="gallery_grid_image_caption">                                   <span class="gallery_image_title uk-text-truncate">' + name + '</span> <span>' + style + '</span> </div></div></div></div>';         }

KevinB · Accepted Answer · 2019-03-20 13:23:47Z

0

You didn't close the quotes on onClick="..." so it may be looking for a function named "handleImage() src="

answered Mar 20, 2019 at 13:23

KevinB

1,2122 gold badges10 silver badges20 bronze badges

2 Comments

Geoff_S Over a year ago

Ok so that was actually a typo on here, but I do have quotes added in my code. Also I added a '#' to my getImage but still no luck

KevinB Over a year ago

Why are you naming a variable '$img'? I would be wary of using the jQuery operator ($) in a variable name. Have you tried changing that variable name?

ProblemsEverywhere · Accepted Answer · 2019-03-20 13:24:45Z

0

You forgot to close the src attribute <img onClick="handleImage()" src ="img.png">

answered Mar 20, 2019 at 13:24

ProblemsEverywhere

5472 silver badges9 bronze badges

Collectives™ on Stack Overflow

JS img click function is not defined

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related