CODEWITHSUNDEEP
javascript
Geoff_S
Geoff_S

Reputation: 5105

JS img click function is not defined

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?

Upvotes: 0

Views: 292

Answers (3)

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4393

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

  1. $("getImage") is replaced by $("#getImage") ,(you missed one # here)

  2. onClick="handleImage() is replaced by onClick="handleImage()" ,(you missed one " here)

  3. 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>

Upvotes: 2

ProblemsEverywhere
ProblemsEverywhere

Reputation: 547

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

Upvotes: 0

KevinB
KevinB

Reputation: 1202

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

Upvotes: 0

Related Questions