Tengo esta función js:
var iframeShowing = false; async function show() { var iframe1 = document.getElementById('help-popup'); iframe1.style.display = iframeShowing ? 'flex' : 'none'; iframeShowing = !iframeShowing; }El problema es que necesito hacer clic 2 veces para mostrar el iframe y hacer que funcione correctamente. Después de hacer clic 2 veces, funciona correctamente (cada clic muestra y oculta el iframe). Pruébelo en el sitio web y lo entenderá. Este es el código html:
<i class="fas fa-question-circle" id="questionmark" onclick="show();" >Este es el sitio web actual: https://personal-website.krix12.repl.co/ La función mencionada anteriormente se llama cuando se hace clic en el icono de pregunta borrosa. ¿Cómo puedo hacer que funcione en el primer clic?
Simplemente puede usar DOMTokenList.toggle() para alternar entre flex y none:
function toggle() { var iframe1 = document.getElementById('help-popup'); iframe1.classList.toggle('hide'); } iframe { display: flex; } .hide { display: none; } <div><i class="fas fa-question-circle" id="questionmark" onclick="toggle();">?</i></div> <iframe id="help-popup" class="hide"></iframe>