changing the display value using JavaScript does not work

Question

I need your help.

I have the following code, in the end of this cod there exist a JavaScript code which change the display value for the div and the tables elements on click of some area of the map, but unfortunately it does not work.

<img src="http://mobiadhome.com/wp-content/uploads/2014/07/HOW-DOES-MOBIAD-WORK.jpg" style="min-width: 756px;" alt="HOW DOES MOBIAD WORK" usemap="#How" id="how">

<map name="How">
  <area shape="circle" coords="365,150,70" alt="Mercury"  href="#how"  onclick="showImage('#ad1');">
  <area shape="circle" coords="531,218,70" alt="Mercury"  href="#how"  onclick="showImage('#ad2');">
  <area shape="circle" coords="610,375,70" alt="Mercury"  href="#how"  onclick="showImage('#ad3');">
  <area shape="circle" coords="565,545,70" alt="Mercury"  href="#how"  onclick="showImage('#ad4');">
  <area shape="circle" coords="415,640,70" alt="Mercury"  href="#how"  onclick="showImage('#ad5');">
  <area shape="circle" coords="241,610,70" alt="Mercury"  href="#how"  onclick="showImage('#ad6');">
  <area shape="circle" coords="135,465,70" alt="Mercury"  href="#how"  onclick="showImage('#ad7');">
</map>



<style>
    #ad1, #ad2, #ad3, #ad4, #ad5, #ad6, #ad7
    {
        width:100vw;
        height: 100vh;
        z-index: 200;
        position: absolute;
        top: 0px;
        right: 0px;
        display:none;
    }

    #ad1 img, #ad2 img, #ad3 img, #ad4 img, #ad5 img, #ad6 img, #ad7 img
    {
        width: 500px;
    }

    #background
    {
        opacity: 0.6;
        background-color: black;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 100;
        width:100vw;
        height: 100vh;
        display:none;
    }
</style>

<div id="background">

</div>

<table id="ad1" class="adunit" >
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-00-472.png" /></center>
        </td>
    </tr>
</table>

<table id="ad2"  class="adunit">
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-00-381.png" /></center>
        </td>
    </tr>
</table >

<table id="ad3" class="adunit">
    <tr>
        <td valign="middle "  class="asunit">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-00-561.png" /></center>
        </td>
    </tr>
</table>


<table id="ad4" class="adunit">
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-01-111.png" /></center>
        </td>
    </tr>
</table>

<table id="ad5" class="adunit">
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-01-201.png" /></center>
        </td>
    </tr>
</table>

<table id="ad6"  class="adunit">
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-01-201.png" /></center>
        </td>
    </tr>
</table>

<table id="ad7" class="adunit">
    <tr>
        <td valign="middle ">
            <center><img src="http://mobiadhome.com/wp-content/uploads/2014/06/Screenshot_2014-06-30-16-01-40.png" /></center>
        </td>
    </tr>
</table>



<script type='text/javascript'>

    function showImage(id)
    {
        document.getElementById(id).style.display='block';
        document.getElementById("background").style.display='block';

    }

    document.getElementById("background").onclick = function(){

        document.getElementsByClassName("adunit").style.display='none';
        document.getElementById("background").style.display='none';

    }

</script>

Are you sure your onclick event is being called? Could you create a fiddle so we can test this issue? — scragar
– scragar, Commented Jul 7, 2014 at 13:04

Amit · Accepted Answer · 2014-07-07 13:06:11Z

2

Use as below HTML, No need to # in JAVASCRIPT

<map name="How">
  <area shape="circle" coords="365,150,70" alt="Mercury"  href="#how"  onclick="showImage('ad1');">
  <area shape="circle" coords="531,218,70" alt="Mercury"  href="#how"  onclick="showImage('ad2');">
  <area shape="circle" coords="610,375,70" alt="Mercury"  href="#how"  onclick="showImage('ad3');">
  <area shape="circle" coords="565,545,70" alt="Mercury"  href="#how"  onclick="showImage('ad4');">
  <area shape="circle" coords="415,640,70" alt="Mercury"  href="#how"  onclick="showImage('ad5');">
  <area shape="circle" coords="241,610,70" alt="Mercury"  href="#how"  onclick="showImage('ad6');">
  <area shape="circle" coords="135,465,70" alt="Mercury"  href="#how"  onclick="showImage('ad7');">
</map>

answered Jul 7, 2014 at 13:06

Amit

15.4k8 gold badges49 silver badges69 bronze badges

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

1 Comment

Upperstage Over a year ago

+1 I think your answer is correct and a necessary step to correct the problem.

Upperstage · Accepted Answer · 2014-07-07 13:06:33Z

0

document.getElementById("background").onclick

Try changing this to

document.getElementByClass("body").onclick

answered Jul 7, 2014 at 13:06

Upperstage

3,7678 gold badges47 silver badges69 bronze badges

2 Comments

Amit Over a year ago

background is the div id. Please check

Upperstage Over a year ago

I understand, but the DIV likely has zero height and zero width. There's no way to click on it. Simply naming a DIV "background" does not place it into the background.

Collectives™ on Stack Overflow

changing the display value using JavaScript does not work

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related