Tengo un div y un img dentro de un div principal.
Supongo que si hago clic en la parte superior del div principal, el img se configurará como visible como se muestra a continuación.
El img no se vuelve visible cuando hago clic en el div principal. ¿Qué estoy haciendo mal?
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>Su detector de eventos está en el elemento invisible
Prueba esto
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>