Javascript DOM更改沒有效果

使用圖像映射時，我試圖構建一個圖形，當您單擊「翼」時，它會使它看起來像一個按鈕並將其壓下。Javascript DOM更改沒有效果

圖像地圖是建立的，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>

它應該隱藏圖像？

我見過其他解決方案，說JavaScript的位置需要在元素之後。我已經在每個位置嘗試過這個腳本，並且總是一樣的。不用找了。我也嘗試將寬度更改爲0像素並將圖像src更改爲「」！我也有DIV內的圖像，並試圖隱藏DIV，但又一次，沒有？

如果我在更改之前發出提醒： alert(document.getElementById(mouse_over_name).style.display)，我收到「無」後會收到一個空白警報框。

我錯過了什麼？

你可以看到上面的代碼住在這裏： http://www.beaconfasteners.net/beacon_advantage/graph/test.html

編輯： 我在所有主要瀏覽器嘗試這樣做。

來源

2014-10-09 njDeveloper

您有相同的ID（'spot_1'）的兩個元素。 ID必須是唯一的。很可能你沒有隱藏正確的元素。 – 2014-10-09 01:27:18

Robby Cornelissen是正確的。你的img沒有隱藏的原因是因爲onclick使用了area元素的id，並且你正在設置display：none，而不是img元素。我不確定是否有辦法隱藏區域元素的內容，但是您可以使用它來查找和隱藏與點擊區域共享相同ID的圖像元素：

function set_spot(mouse_over_name) { 
    [].forEach.call(document.querySelectorAll('img'), function(el) { 
     if (el.id === mouse_over_name) { 
      el.style.display = 'none'; 
     }; 
    }); 
};

這將遍歷頁面上的所有圖像，所以我無法保證這種解決方案的速度。你可以在這裏先睹爲快吧：

jsfiddle

來源

2014-10-09 01:52:35

與spot_1的兩個元素爲id是問題！感謝兩個回覆！ – njDeveloper 2014-10-09 02:21:33

你是如何設法修復它的？ – 2014-10-09 04:06:19

Javascript DOM更改沒有效果

回答

相關問題