Si necesita dos eventos independientes para desencadenar un tercero, debe monitorear ambos eventos y tener alguna forma de recordar su historial. Cada vez que ocurre uno de los eventos, verifica si el otro evento ha ocurrido anteriormente y, de ser así, activa el tercero. De lo contrario, debe recordar el evento que ocurrió hasta que se detecte el otro evento. (Creo que entiendes esto, pero puede que no tengas claro cómo hacerlo en javascript).

Mi fragmento de trabajo a continuación es un ejemplo en el que se dibujan dos cuadros rojos. Si se hace clic en cualquiera, cambiará, pero un tercer cuadro no cambiará a menos que se haga clic en ambos. No importa en qué orden se hizo clic en las dos casillas. En este ejemplo, la 'memoria' de los clics anteriores se realiza comprobando si la otra casilla ya ha cambiado.

Fundamentalmente, el ejemplo ilustra cómo configurar detectores de eventos para monitorear constantemente el cambio. Son funciones aplicadas a objetos de página que toman dos argumentos 1) el evento a escuchar, en este caso click' pero podría ser change o mouseover el mouse, etc. y 2) la acción a realizar cuando se detecta el evento. Por lo general, como en este ejemplo, se puede incluir una función huérfana o de flecha como argumento real (pero también funcionará una referencia a una función externa).

 // make references to objects on page: const firstTarget = document.getElementById('target1'); const secondTarget = document.getElementById('target2'); const output = document.getElementById('output'); // set event listeners for click on first target: firstTarget.addEventListener('click', event => { event.target.style="background:yellow"; event.target.innerHTML="1st clicked"; checkStatus(); }); // end event listener 1; // set event listeners for click on second target: secondTarget.addEventListener('click', event => { event.target.style="background:green"; event.target.innerHTML="2nd clicked"; checkStatus(); }); // end event listener 2; function checkStatus() { if (firstTarget.innerHTML=="1st clicked" && secondTarget.innerHTML=="2nd clicked") { output.innerHTML = "BOTH CLICKED!"; output.style="background:red"; } // end if block; } // end checkStatus function;

 div { display: inline-block; background: red; width: 80px; height: 30px; border: 1px solid black; padding: 10px; margin: 5px; } #output { background: white; width: 195px; height: 35px; }

 <div id="target1">click me</div> <div id="target2">click me</div> <br> <div id="output"></div>

Si he estado tratando de encontrar una solución comprobando si "answerDisplayOne" y "answerDisplayTwo" están visibles y luego llamando a una función pero sin éxito:

Esto sucede porque verifica la condición solo una vez¹:

 if ( $("#answerDisplayOne").css('display') == 'inline' && $("#answerDisplayTwo").css('display') == 'inline'){ function delayTwo (URL) { setTimeout( function() { window.location = URL }, 3500 ); document.getElementById('video').play(); } }

Significa que verifica la condición y define una función delayTwo IF #answerDisplayOne y #answerDisplayTwo tienen la propiedad css "display" establecida en "inline". Esto no es lo que quieres.

Desea verificar la condición cada vez que el usuario presiona un botón:

 function answerOne() { document.getElementById("answerDisplyOne").style.display = "inline"; document.getElementById("buttonCorrectAnswerOne").style.display = "none"; check(); } function answerTwo() { document.getElementById("answerDisplayTwo").style.display = "inline"; document.getElementById("buttonCorrectAnswerTwo").style.display = "none"; check(); } function check() { if ($("#answerDisplayOne").css('display') == 'inline' && $("#answerDisplayTwo").css('display') == 'inline'){ setTimeout( function() { window.location = URL }, 3500 ); document.getElementById('video').play(); } }

¹ por una vez quiero decir literalmente una vez. JavaScript se ejecuta de arriba a abajo. Es por eso que usamos detectores de eventos para ejecutar código una vez que sucedió algo. No podemos saber de antemano cuándo el usuario hará clic en un botón, ¿verdad?