Trigger javascript function after clicking on two buttons

Question

Trigger javascript function after clicking on two buttons

I am currently working on developing a web game inspired by Duolingo. In a specific scenario, I need a function to be triggered after two button clicks to progress further. However, I am facing challenges in finding solutions online or understanding it on my own since this is my first time working with JavaScript.

For scenarios with a single answer, I have successfully implemented the following function which is executed after a single button press:

function answer (URL) {
    setTimeout( function() { window.location = URL }, 3500 );
    document.getElementById("answerDisplay").style.display = "inline";
    document.getElementById("buttonCorrectAnswer").style.display = "none";
    document.getElementById('video').play();
  }

I have attempted to address the issue by checking if "answerDisplayOne" and "answerDisplayTwo" are both visible and then calling a function, but have not been successful:

function answerOne() {
  document.getElementById("answerDisplyOne").style.display = "inline";
  document.getElementById("buttonCorrectAnswerOne").style.display = "none";
}

function answerTwo() {
  document.getElementById("answerDisplayTwo").style.display = "inline";
  document.getElementById("buttonCorrectAnswerTwo").style.display = "none";
}


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

javascript html css

Answer 1

Answer №1

To find a solution, I attempted to check if both "answerDisplayOne" and "answerDisplayTwo" are visible before calling a function, but without success:

The issue lies in only checking the condition once:

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

This code checks the condition and defines the function delayTwo IF both #answerDisplayOne and #answerDisplayTwo have their css property "display" set to "inline". This is not the desired behavior.

What is needed is to check the condition each time the user presses a button:

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();
  }
}

¹ By "once" I mean literally only once. JavaScript executes sequentially from top to bottom. This is why event listeners are used to trigger code when a specific event occurs. We cannot predict in advance when the user will click a button, can we?

Answer 2

To find a solution, I attempted to check if both "answerDisplayOne" and "answerDisplayTwo" are visible before calling a function, but without success:

The issue lies in only checking the condition once:

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

This code checks the condition and defines the function delayTwo IF both #answerDisplayOne and #answerDisplayTwo have their css property "display" set to "inline". This is not the desired behavior.

What is needed is to check the condition each time the user presses a button:

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();
  }
}

¹ By "once" I mean literally only once. JavaScript executes sequentially from top to bottom. This is why event listeners are used to trigger code when a specific event occurs. We cannot predict in advance when the user will click a button, can we?

Answer 3

Answer №2

To activate a third event based on two independent events, you must constantly monitor both events and keep track of their history. Whenever one of the events occurs, you need to check if the other event has occurred before and, if so, trigger the third event. If not, you need to retain the knowledge of the event that has occurred until the other event is detected. (Understanding this concept might be clear, but the implementation in javascript could be challenging).

Below is a practical example where two red boxes are displayed. When either box is clicked, it changes its color, but the third box remains unchanged until both boxes are clicked. The sequence in which the boxes are clicked does not matter. In this instance, the 'memory' of previous clicks is maintained by verifying if the other box has already been clicked.

Essentially, this example demonstrates how to establish event listeners to continuously monitor changes. These listeners are functions assigned to page elements that require two parameters: 1) the event to monitor, such as click' but it could also be change or mouseover, and 2) the action to perform when the event is detected. Typically, as shown in this example, an arrow or lambda function can be utilized as the actual argument, but referencing an external function would work as well.

// References to page objects:
const firstTarget = document.getElementById('target1');
const secondTarget = document.getElementById('target2');
const output = document.getElementById('output');

// Event listener for click on first target:
firstTarget.addEventListener('click', event => {
event.target.style="background:yellow";
event.target.innerHTML="1st clicked";
checkStatus();
}); // End of event listener 1;

// Event listener for click on second target:
secondTarget.addEventListener('click', event => {
event.target.style="background:green";
event.target.innerHTML="2nd clicked";
checkStatus();
}); // End of event listener 2;

function checkStatus() {
  if (firstTarget.innerHTML=="1st clicked" && secondTarget.innerHTML=="2nd clicked") {
   output.innerHTML = "BOTH CLICKED!";
   output.style="background:red";
   } // End of if block;
} // End of 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>

Answer 4

To activate a third event based on two independent events, you must constantly monitor both events and keep track of their history. Whenever one of the events occurs, you need to check if the other event has occurred before and, if so, trigger the third event. If not, you need to retain the knowledge of the event that has occurred until the other event is detected. (Understanding this concept might be clear, but the implementation in javascript could be challenging).

Below is a practical example where two red boxes are displayed. When either box is clicked, it changes its color, but the third box remains unchanged until both boxes are clicked. The sequence in which the boxes are clicked does not matter. In this instance, the 'memory' of previous clicks is maintained by verifying if the other box has already been clicked.

Essentially, this example demonstrates how to establish event listeners to continuously monitor changes. These listeners are functions assigned to page elements that require two parameters: 1) the event to monitor, such as click' but it could also be change or mouseover, and 2) the action to perform when the event is detected. Typically, as shown in this example, an arrow or lambda function can be utilized as the actual argument, but referencing an external function would work as well.

// References to page objects:
const firstTarget = document.getElementById('target1');
const secondTarget = document.getElementById('target2');
const output = document.getElementById('output');

// Event listener for click on first target:
firstTarget.addEventListener('click', event => {
event.target.style="background:yellow";
event.target.innerHTML="1st clicked";
checkStatus();
}); // End of event listener 1;

// Event listener for click on second target:
secondTarget.addEventListener('click', event => {
event.target.style="background:green";
event.target.innerHTML="2nd clicked";
checkStatus();
}); // End of event listener 2;

function checkStatus() {
  if (firstTarget.innerHTML=="1st clicked" && secondTarget.innerHTML=="2nd clicked") {
   output.innerHTML = "BOTH CLICKED!";
   output.style="background:red";
   } // End of if block;
} // End of 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>

Trigger javascript function after clicking on two buttons

Answer №1

Answer №2

Similar questions

Display a new div with its content every 5th item

Empty space encompassing the entire sheet

Error message encountered when submitting a form after receiving an AJAX response: VerifyCsrfToken Exception

How should HTML5 type "month" be stored in a Django model's database using which data type?

Is there a way to overlay a 'secret' grid on top of a canvas that features a background image?

What is the best way to align a scalable SVG image in the center?

Is it possible to pass a class method to an onClick event from within the render method in ReactJS?

What is causing the .responseToString function to be recognized as not a function?

Guide to sending post variables in an AngularJS service

Resizing a floated div causes the image to break out

The integration of RxJS into a Master/Worker workflow

Prevent removal of h2 tag within a contenteditable segment

What is the best way to incorporate CSS into an Angular 4 project?

What is the best way to create a non-reactive value in Vue.js?

Troubleshooting: Unable to Sort Column in ngx-DataTable Angular 4

Having trouble deploying my Express/Next app on Netlify

None of the Views are rendered after executing RedirectToAction

Issue with a stationary directional light tracking the movement of a rotating object and/or changes in the camera perspective

Google Maps is experiencing difficulties maintaining its longitude and latitude coordinates within the Bootstrap tabbed user interface

Submitting the form with a target of _blank will result in the form being submitted on both a