使用JavaScript更改显示值不起作用

Question

我需要你的帮助。

我有下面的代码，在这个cod的末尾，有一个JavaScript代码，它更改div和table元素的显示值，点击地图的某个区域，但不幸的是，它不能工作。

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

Answer 1

如下图所示，无需在#中使用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>

Answer 2

document.getElementById("background").onclick

试着把这个改成

document.getElementByClass("body").onclick