我在DIV元素中有2个元素，其中1个具有可见性设置为隐藏。我希望隐藏的人变得可见，但没有这样做

Question

我在父母div中有一个DIV和IMG。

我假设如果我单击父级的顶部，则IMG将设置为可见如下。

当我单击父级时，IMG不可见。我在做什么错？

function displayLock(display_square) {
  if (display_square == 4) {
    document.getElementById("sq4").style.visibility = "visible"
  }
}

img#sq4 {
  visibility: hidden;
}

<div class="twenty-three" id="twenty-three">
  <div id="question">?</div>
  <img id="sq4" src="./lock_1.png" onclick="displayLock(4)" />
</div>

Answer 1

您的活动听众在隐形元素上

尝试此尝试

function displayLock() {
  document.getElementById(this.dataset.id).style.visibility = "visible"
}
document.getElementById("question").addEventListener("click",displayLock)

img#sq4 {
  visibility: hidden;
}

<div class="twenty-three" id="twenty-three">
  <div id="question" data-id="sq4">?</div>
  <img id="sq4" alt="sq4" src="./lock_1.png"  />
</div>