Javascript onclick не вызывает функцию на <img> - PullRequest
Новая
       29

Javascript onclick не вызывает функцию на <img>

0 голосов
/ 30 сентября 2019

У меня есть галерея изображений, и при нажатии на каждое изображение я щелкаю изображение с некоторой информацией об изображении. Моя проблема в том, что onclick, который я применил, не вызывает функцию, и при console.log не возникает ошибка. Какова бы ни была возможная причина, любое понимание будет действительно полезным. Остановитесь на этом простом вопросе, но ничего не понимаете. 

<div class="column">
  <img src="img/image.jpg" alt="Snow" style="width:100%" onclick="openNav1();">
  <div class="overlay" id="myNav1">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="text">Info</div>
  </div>
</div>

<script type="text/javascript">
  function openNav1() {
    console.log('in herre');
    document.getElementById("myNav1").style.display = "block";
  }

  function closeNav() {
    document.getElementById("myNav1").style.display = "none";
  }
</script>

Ответы [ 3 ]

0 голосов
/ 30 сентября 2019

Ваш Javascript работал, но вы не знали, потому что его стиль отображения уже был

Блок Поэтому я изменил отображение на Нет И сделал небольшое изменение дляВы в надежде JavaScript

Вам это нравится.

CloseNav (); Функция не нужна, потому что теперь # myNav1 Открывается и закрывается нажатием на изображение. 

<div class="column">
    <img id="img"  src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg"  height='250px' alt="Snow" style="width:100%" onClick="openNav1();" />
     <div style='display:none' class="overlay" id="myNav1">
  <a  href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <div class="text">Info</div>
  </div>
  </div>

<script type="text/javascript">
function openNav1() {
var mynav = document.getElementById("myNav1");
var img = document.getElementById("img");

  img.style.cursor = "pointer";
  if (mynav.style.display == "block") {
  mynav.style.display = "none";
  } else {
  mynav.style.display = "block";
  }
}

function closeNav() {
  document.getElementById("myNav1").style.display = "none";
}
</script>
0 голосов
/ 30 сентября 2019

Вы можете попробовать использовать с тегом привязки 

<a onclick="openNav1();"><img src="img/image.jpg" alt="Snow" style="width:100%" > </a>
0 голосов
/ 30 сентября 2019

Бро, у вас есть div.overlay .. Я предполагаю, что оно покрывает изображение, и поэтому вы не можете щелкнуть <img />, так как оно всегда находится под div.overlay. Одним из возможных решений является применение pointer-events: none к .overlay

...