Show image in div using onclick and javascript code

Question

I am trying to show an image in div when the same image is clicked in a different div. I have the following code to do that but it is not working. Java Script:

    function showDiv() {
    document.getElementById(this.id).style.display = "show";
    }

HTML Code:

          <div class="row">
            <div class="col-md-4"><a href="#"><img id="1" 
            src="images/gmail.png" onclick="showDiv()"></a></div>
            <div class="col-md-4"><a href="#"><img id="2" 
               src="images/calender.png" onclick="showDiv()"></a></div>
            <div class="col-md-4"><a href="#"><img id="3" 
             src="images/Drive.png" onclick="showDiv()"></a></div>              
            </div>

Please use javascript function only without libraries.

my guts say you've got the same id applied to 2 different elements. That will never work. For ther rest, look at simonov's answer — giorgio
– giorgio, Commented Jul 24, 2017 at 9:16
you should pass that element being clicked in the function showDiv — Nagaraju
– Nagaraju, Commented Jul 24, 2017 at 9:17

Simonov Dmitry · Accepted Answer · 2017-07-24 09:15:32Z

1

It should be either

document.getElementById(this.id).style.display = "block";

or

document.getElementById(this.id).style.visibility = "visible";

answered Jul 24, 2017 at 9:15

Simonov Dmitry

4572 silver badges6 bronze badges

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

Comments

Dinesh undefined · Accepted Answer · 2017-07-24 09:19:34Z

There is no such display='show' in css. You can use display:'block' You can read more about display property here Also you need to pass this to showDiv in order to get id inside function like this onclick="showDiv(this)"

function showDiv(event) {
    document.getElementById(event.id).style.display = "block";
    }

<div class="row">
    <div class="col-md-4"><a href="#"><img id="1" 
            src="images/gmail.png" onclick="showDiv(this)"></a></div>
    <div class="col-md-4"><a href="#"><img id="2" 
               src="images/calender.png" onclick="showDiv(this)"></a></div>
    <div class="col-md-4"><a href="#"><img id="3" 
             src="images/Drive.png" onclick="showDiv(this)"></a></div>              
 </div>

Collectives™ on Stack Overflow

Show image in div using onclick and javascript code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related