Clicking once or twice on a single element does not produce any results in Javascript

Question

Clicking once or twice on a single element does not produce any results in Javascript

I am trying to implement a click function that activates when a button is clicked. Additionally, I want to incorporate a double click function on the same element that initiates a different action.

var click = false;
onEvent("image2", "click", function(event) {
  click = true;
});
if (click === true) {
  setTimeout(function() {
    onEvent("image2", "click", function(event) {
      setScreen("safeScreen");
      console.log("double click");
    });
  }, 200);
} else {
  onEvent("image2", "dblclick", function(event) {
    setScreen("safeScreen");
    console.log("click");
  });
}

This code seems to be erroneous, and I am unsure where to begin fixing it. What mistakes have I made? My goal is to ensure that the single click does not activate when the user performs a double click.

javascript code.org

Answer 1

Answer №1

Update:

For a more efficient approach, consider passing the function clicks() to your event listener like this:

onEvent("image2", "click", clicks);

The function clicks() will determine whether there was a single or double click based on the setTimeout function. You can customize the duration of the setTimeout using the timeout variable and ensure that the clickCount variable is declared outside the clicks() function.

A Simplified JavaScript Solution

Another option would be to implement two event listeners for a cleaner code structure. Take a look at this functional example below.

var selector = document.getElementById('codeorg');
selector.addEventListener('click', clicks);

// Global Scope variables needed
var clickCount = 0;
var timeout = 500;

function clicks() {
  // Incrementing click count to determine number of clicks
  
      clickCount++;
      if (clickCount == 1) {
        setTimeout(function(){
          if(clickCount == 1) {
            console.log('singleClick');
            // Execute single click functionality here 
          } else {
            console.log('double click');
            // Execute double click functionality here 
          }
          clickCount = 0;
        }, timeout || 300);
      }
}

// Not relevant to your specific requirements - additional JS functionality
var button = document.getElementById('button');

button.addEventListener('click', singleClick);
button.addEventListener('dblclick', doubleClick);

function singleClick() {
  //console.log('single click');
}

function doubleClick() {
  console.log('double click');
}

#codeorg {
  margin-bottom: 100px;
}

<h2>Double Click</h2>

<button id="button">Click me</button>


<hr><hr>


<h2>Double click or Single Click</h2>

<button id="codeorg">Click me</button>

Answer 2

Update:

For a more efficient approach, consider passing the function clicks() to your event listener like this:

onEvent("image2", "click", clicks);

The function clicks() will determine whether there was a single or double click based on the setTimeout function. You can customize the duration of the setTimeout using the timeout variable and ensure that the clickCount variable is declared outside the clicks() function.

A Simplified JavaScript Solution

Another option would be to implement two event listeners for a cleaner code structure. Take a look at this functional example below.

var selector = document.getElementById('codeorg');
selector.addEventListener('click', clicks);

// Global Scope variables needed
var clickCount = 0;
var timeout = 500;

function clicks() {
  // Incrementing click count to determine number of clicks
  
      clickCount++;
      if (clickCount == 1) {
        setTimeout(function(){
          if(clickCount == 1) {
            console.log('singleClick');
            // Execute single click functionality here 
          } else {
            console.log('double click');
            // Execute double click functionality here 
          }
          clickCount = 0;
        }, timeout || 300);
      }
}

// Not relevant to your specific requirements - additional JS functionality
var button = document.getElementById('button');

button.addEventListener('click', singleClick);
button.addEventListener('dblclick', doubleClick);

function singleClick() {
  //console.log('single click');
}

function doubleClick() {
  console.log('double click');
}

#codeorg {
  margin-bottom: 100px;
}

<h2>Double Click</h2>

<button id="button">Click me</button>


<hr><hr>


<h2>Double click or Single Click</h2>

<button id="codeorg">Click me</button>

Clicking once or twice on a single element does not produce any results in Javascript

Answer №1

Similar questions

Remove the model from operation

Design an unordered list containing a text input field and a clickable button

Unlocking the Secrets: Retrieving Message Embeds Using Discord.js' Message ID

Clone the children of an li element using jQuery, modify the text within a child tag, and then add it to

Oops! There was an issue with building the module in ./src/index.js using babel-loader

Error: The function bind is not supported on instance[method] in the AdonisJs framework

How can we access parameters in ag-Grid's Angular 1 onFilterModified event?

Looping through elements with jQuery's `each` method within another `

Combining Two Models in Sails.js

What is the best way to incorporate correct reference logic when utilizing Joi validation?

Ways to divide a string in javascript

How to Handle the Absence of HTML5 Spellcheck in Specific Web Browsers

Unexpected bug encountered while implementing redux

What is the process for adding texture to a model that has been imported using OBJLoader?

Is there a way to extract all the class names from a JavaScript file?

Documentation for Lambda function within an object

Incorporate a click function onto the image within the canvas

Using JsGrid to efficiently load nested object data into a table

Data loading issue with asp.net mvc Ajax

JavaScript error: "null or not an object" bug