Я пытаюсь, чтобы изображение появилось на экране, и сценарий не выполняется

Question

Я пытаюсь отобразить отдельное изображение при нажатии активного изображения на странице.

Я пытался переместить щелчок мыши в тег <a>, тег <img>, Тег <div>, я пробовал использовать разные версии этой команды скрипта, похоже, ничто не заставит ее работать. Все активные изображения и курсор: указатель работают, но java не работает. Любые идеи??

function opencontact() {
  var x = document.getElementById("instagram");
  if (x.style.display === "none") {
    x.style.display = "inline";
  } else {
    x.style.display = "none";
  }
}

.insta {
  display: none;
  position: fixed;
  top: 180px;
  right: 220px;
  z-index: 2;
  transition: 0s;
  padding: 0px;
}

<div id="lips2" class="lipbtn2">
  <span style="cursor:pointer" onclick="opencontact()">
<a>
<img src="https://www.country935.ca/wp-content/uploads/sites/19/2017/07/a-kiss.jpg" width="15%" height="auto" alt="" class="kiss2">
<img src="https://dzasv7x7a867v.cloudfront.net/product_photos/34277616/20150910_011229_1000w.png" width="15%" height="auto" alt="" class="kiss2active">
</a>
</span>
</div>

<div id="instagram" class="insta">
  <a href="http://instagram.com/"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/1200px-Instagram_logo_2016.svg.png" alt="" width="124px" />
  </a>
</div>

Answer 1

Вам нужно перевернуть тест или вам придется дважды щелкнуть

Я не уверен, что еще вы хотите, чтобы произошло

function opencontact() {
  var x = document.getElementById("instagram");
  x.style.display = x.style.display === "inline"? "none" : "inline"
}

.insta {
  display: none;
  position: fixed;
  top: 180px;
  right: 220px;
  z-index: 2;
  transition: 0s;
  padding: 0px;
}

<div id="lips2" class="lipbtn2">
  <span style="cursor:pointer" onclick="opencontact()">
<a>
<img src="https://www.country935.ca/wp-content/uploads/sites/19/2017/07/a-kiss.jpg" width="15%" height="auto" alt="" class="kiss2">
<img src="https://dzasv7x7a867v.cloudfront.net/product_photos/34277616/20150910_011229_1000w.png" width="15%" height="auto" alt="" class="kiss2active">
</a>
</span>
</div>

<div id="instagram" class="insta">
  <a href="http://instagram.com/"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/1200px-Instagram_logo_2016.svg.png" alt="" width="124px" />
  </a>
</div>