I have a div and an img inside a parent div.
I assume if I click on top of the parent div, the img will be set to visible as below.
The img is not rendered visible when I click on the parent div. What am I doing wrong?
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>Your event listener is on the invisible element
Try this
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>