Изменения в DOM в Javascript не влияют

Используя карту изображения, я пытаюсь создать графику, которая, когда вы нажимаете на «крыло», делает ее похожей на кнопку и подавляет ее.Изменения в DOM в Javascript не влияют

Карта изображения построена, 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 px и изменить изображение src на ""! У меня также были образы внутри DIV и пытались скрыть DIV, но опять же, ничего?

Если я поставил предупреждение: alert(document.getElementById(mouse_over_name).style.display) перед изменением я получаю пустое поле оповещения, после того как получил «нет».

Что мне не хватает?

Вы можете увидеть выше код здесь жить: http://www.beaconfasteners.net/beacon_advantage/graph/test.html

Edit: Я попытался это во всех основных браузерах.

источник

2014-10-09 njDeveloper

У вас есть два элемента с одинаковым идентификатором ('spot_1'). Идентификаторы должны быть уникальными. Скорее всего, вы не скрываете правильный элемент. –

Robby Cornelissen был верным. Причина, по которой ваш img не скрывается, заключается в том, что onclick использует идентификатор элемента area, и вы устанавливаете отображение: none на нем, а не на элемент img. Я не уверен, если есть способ, чтобы скрыть содержимое элемента площади, но вы могли бы потенциально использовать это, чтобы найти и скрыть элемент изображения, который разделяет один и тот же идентификатор, как область, которая щелкнула:

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 для идентификатора были проблемой! Благодаря обоим ответам! – njDeveloper

Как вам удалось это исправить? –

Изменения в DOM в Javascript не влияют

ответ

Смежные вопросы