Javascript 单击功能不执行

这是一个很长的页面，所以我将附上完整的文档，但在这里进行总结。我有一系列的地图元素，单击这些元素时，应该会激活一个描述页面。有关守则如下：

    <map id="mapg0" onclick="showPanel('pecheislandrear')" style="position:fixed; z:2">
        <area shape="poly" coords="11,13,13,11,14,11,14,3,12,1,11,0,3,0,1,2,0,3,0,11,2,13,3,14,11,14" alt="" title="Peche Island Rear Range" id="mapg0_1">
    </map>
        <img alt="Peche Island Rear Range" onclick="showPanel('pecheislandrear')" usemap="#mapg0" src="LakeErie1_files/reddot.png" id="imageg0" style="position:absolute; z:1; left:210.258015267px; top:348.347527764px; width:14px;height:14px;">
    <map id="mapg1" onclick="showPanel('stclairflatsfront')" style="position:fixed; z:2">
        <area shape="poly" coords="11,13,13,11,14,11,14,3,12,1,11,0,3,0,1,2,0,3,0,11,2,13,3,14,11,14" alt="" title="St. Clair Flats front Range" id="mapg1_1">

即使在开始时插入警报对话框，警报也不会显示。但是，如果我替换

    <map id="mapg0" onclick="alert ('pecheislandrear')" 

我收到警报，所以onclick正在行动。另一部分是我希望激活的面板：

 <div id="pecheislandrear" class="panelHidden" style="position:fixed;left:50%;margin-left:-136px;top:50%;margin-top:-211px;
        z:1;width:272px;height:422px;">
    <div id="panel0" style="position:absolute;left:0px;top:12px;width:272px;
        height:54px;overflow:hidden;">
      <p class="Body panelP-5"><span class="panelTitle">Peche Island Rear Range</span></p>
    </div>
    <div style="position:absolute;left:24px;top:229px;width:232px;height:136px;overflow:hidden;">
      <p class="Normal"><span class="panelDesc">Range lights were 
established off Peche island in 1898. Pile clusters, they were 
repeatedly swept away by ice until 1908 when they were replaced by 
permanent iron and steel structures on cribs. An explosion destroyed the
front range in 1927, and the rear range was leaning so badly it was 
replaced with a modern structure in 1983. The tower was moved to Marine 
City where it can now be seen on the waterfront.</span></p>
    </div>
    <a onclick="var w = window.open(this.href,'_blank','width=1400,directories=yes,location=yes,menubar=yes,resizable=no,
        scrollbars=yes,status=yes,toolbar=yes'); if( w != null ){ w.focus(); }; return false;" href="http://www.lighthousefriends.com/light.asp?ID=165" target="_blank" class="panelOBJ-12 ActiveButton buttonHeight" style="position:absolute;left:84px;top:372px;width:104px;height:21px;">
      <span>Learn&nbsp;More</span>
    </a>
    <img alt="photo" src="LakeErie1_files/pecherear.jpg" onclick="hidePanels()" style="position:absolute;z:2;left:38px;top:73px;width:201px;height:151px;">
 </div>

附上整个htm以供审查。我将感谢您的指导。只有两个对象工作的测试用例。68的较长案例不存在差异，我无法辨别差异。

如果您在showPanel中添加警报，该警报是否运行？如果您尝试以下方法：

function showPanel (panelId)
{
    document.getElementById(panelId).classList.remove('panelHidden');
}

---

你的在线html适合我！我可以单击所有项目，并弹出关联警报！但是，通过查看代码，只需要一个小提示：对于隐藏函数，请看一看：在showPanel函数的开头尝试console.logpanelId，而不是警报。这有利于调试。由于某些原因，js标记中有css规则。因此，它抛出一个错误，谷歌浏览器控制台会告诉你它在哪里。

function showPanel (panelId)
{
    document.getElementById(panelId).classList.remove('panelHidden');
}