CODEWITHSUNDEEP
javascripthtmlcss
juju17
juju17

Reputation: 269

Unable to get the target element

I'm trying to create a simple gallery using javascript but everytime i click on a thumbnail, the screen or the biggest picture( the main picture i mean) isn't changing. 

    <div id='headImage'>
    <img src='bron.jpg' id='screen' height='300' width='400'/>

</div>


<div id='imagelist' onclick='changeImage(event)'>
    <img src='bron.jpg' height='150' width='150'/>
    <img src='curry2.jpg'  height='150' width='150'/>
    <img src='irving.jpg' height='150' width='150'/>
    <img src='phelps.jpg'  height='150' width='150'/>
    <img src='stonie.jpg' height='150' width='150'/>



</div>

<script type='text/javascript'>

function changeImage(event)
{
    event = event || window.event;


    var targetElement = event.target || event.srcElement;

        //if(targetElement ='IMG'){
            document.getElementById("screen").src = targetElement.getAttribute("src");
        //}
}
</script>

Upvotes: 0

Views: 228

Answers (1)

user3119231
user3119231

Reputation:

You wrote:

<div id='imagelist' onclick()='change(event)'>

But correct syntax is:

<div id='imagelist' onclick='change(event)'>

And your function changeImage(event) is only called if you write the correct name:

<div id='imagelist' onclick='changeImage(event)'>

Upvotes: 4

Related Questions