Javascript-DOM更改没有效果_Javascript_Html_Dom

Javascript-DOM更改没有效果

javascript html dom

Javascript-DOM更改没有效果,javascript,html,dom,Javascript,Html,Dom,使用图像地图，我试图建立一个图形，当你点击一个“翅膀”，它使它看起来像一个按钮，并按下它图像映射已经建立，onclick正在工作，但什么也没发生代码如下： <!DOCTYPE html> <html> <head></head> <body> <map name="location-map" style="cursor:pointer;"> <area id="spot_1" onClick="set_spo

使用图像地图，我试图建立一个图形，当你点击一个“翅膀”，它使它看起来像一个按钮，并按下它

图像映射已经建立，onclick正在工作，但什么也没发生

代码如下：

<!DOCTYPE html>
<html>
<head></head>
<body>
 <map name="location-map" style="cursor:pointer;">
  <area id="spot_1" onClick="set_spot(this.id)" shape="poly" coords="66,78,122,38,194,15,186,106,174,112,160,118" />
 </map>
 <img src="PH.png" usemap="#location-map" id="spot_1" style="position:absolute;top:0px;left:0px;width:402px;height:302px;" />

 <script type="text/javascript">
  function set_spot(mouse_over_name) {
    document.getElementById(mouse_over_name).style.display="none";
  };
 </script>

</body>
</html>



编辑：
我在所有主流浏览器中都尝试过这一点。
罗比·科内利森（Robby Cornelissen）是正确的。img没有隐藏的原因是onclick使用了area元素的id，并且您正在设置display:none，而不是img元素。我不确定是否有方法隐藏area元素的内容，但您可以使用此方法查找并隐藏与单击的区域具有相同id的image元素：
function set_spot(mouse_over_name) { 
    [].forEach.call(document.querySelectorAll('img'), function(el) {
       if (el.id === mouse_over_name) {
           el.style.display = 'none';
       };
    });
};

这将遍历页面上的所有图像，因此我无法保证这种解决方案的速度。您可以在此处预览：
您有两个ID相同的元素（spot\u 1
）。ID必须是唯一的。很可能您没有隐藏正确的元素。问题在于两个元素的id为spot_1！感谢两个回复！