Is there a way to undo the click event in Javascript?

Is there a way to revert back to the initial position after clicking?

I successfully changed the x icon to a + icon on click, but now I'm struggling to reverse that action. I've tried using MOUSEUP and DBLCLICK events, but they aren't ideal solutions. Also, if I use the CLICK event in =>firstLiI.addEventListener('click', start2); it overrides the initial logic.

const firstLiI = document.querySelector('li').children[0].children[0];

firstLiI.addEventListener('click', start1);
firstLiI.addEventListener('dblclick', start2);

//Event Handler
function start1(){
  firstLiI.classList.add('fa-plus');
  firstLiI.classList.remove('fa-remove');
}

function start2(){
  firstLiI.classList.remove('fa-plus');
  firstLiI.classList.add('fa-remove');

}

Answer ā„–1

It is recommended to toggle classes like this:

const firstLiIcon = document.querySelector('li').children[0].children[0];

firstLiIcon.addEventListener('click', handleClick);

//Event Handler
function handleClick(){
  firstLiIcon.classList.toggle('fa-plus');
  firstLiIcon.classList.toggle('fa-remove');
}

Answer ā„–2

When your button does not have the fa-plus or fa-remove icons and only has a placeholder text, you need to follow this logic for toggling the icons after the first click.

(To reverse this process, simply change .add to .remove and .remove to .add). That's all!

const firstLiI = document.querySelector('li').children[0].children[0];

firstLiI.addEventListener('click', start);

//Event Handler
function start(){
  if (!firstLiI.classList.contains('fa-plus')) {
    firstLiI.classList.add('fa-plus');
    firstLiI.classList.remove('fa-remove');
  } else {
    firstLiI.classList.remove('fa-plus');
    firstLiI.classList.add('fa-remove');
  }
}

If your button already has one of these icons rendered, you can use the simpler toggle function like this:

function start(){
  firstLiI.classList.toggle('fa-plus');
  firstLiI.classList.toggle('fa-remove');
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to retrieve nested menu items within the scope by utilizing JSON and AngularJS

I have recently started working with angular and am facing difficulty in accessing the submenu items within my angular application. While I can successfully access the top level menu items, I am struggling to retrieve the second level items. Here is a sni ...

The useRouter hook from next/router was unable to connect because NextRouter was not activated

import { useRouter } from 'next/router'; const Navbar2 = () => { const router = useRouter(); return ( <nav className={`fixed top-0 w-full px-10 bg-white p-4 transition-all duration-500 ${isVisible ? 'top-0' : 'top-[-1 ...

Showing button based on a particular value

I am trying to dynamically display a button based on the value of the sendSMS property for the logged-in user. I have added this property in the viewer model, which is connected to the user's base model. However, I am encountering difficulties with us ...

Rendering a Vue select list before receiving data from a Meteor callback

I am currently facing an issue with populating my events array from a meteor call so that it appears in a select list. The 'get.upcoming' Meteor function returns an array of JSON objects, but it seems like the select list is being rendered before ...

Troubleshooting the issue: Node.js application unable to utilize Mongodb's $addToSet functionality

I'm having an issue with mongo's $addToSet function not properly adding a Store to my stores array (where I have commented out seemed to work), resulting in duplicate IDs. Can anyone help me identify my mistake and suggest a solution? Thank you. ...

State properties in Vuex remain unchangeable despite using mutator methods

I've encountered an issue with the code in my vuex module called user.js: import Vue from "vue"; import Vuex from 'vuex'; Vue.use(Vuex); const state = { user: { firstName: null, lastName: null, ...

Having trouble with Ajax.updater?

I am a JavaScript newcomer and currently facing an issue with prototypes. I am attempting to update sample.jsp using Ajax.updater after it is loaded, but for some reason, it's not working. Here is the source code of sample.jsp: <%@page contentTyp ...

Encountering an issue: Unable to load resources - Server returned a status code of 500

Struggling with implementing ajax code in my app development. I've encountered an issue where the ajax code that works fine in the video tutorials I'm following doesn't seem to work for me. It's really frustrating! Here is a snippet of ...

Merging Two Angular Pages within a Jhipster Application

My jhipster application is simple, generating 2 entities: Product and Category. The generated pages to list the data for these entities can be found here. Specifically, there are pages for Product and Category. If I want to create a new page that combines ...

Sharing the checkbox's checked status with an AJAX script

I am faced with a challenge involving a table that contains checkboxes in the first column. When a checkbox is checked, it triggers an AJAX script that updates a PHP session variable with the selected values. The functionality is currently operational, but ...

Can you suggest a simpler approach to implementing this function?

Greetings to all who are perusing this message. I have devised a technique for retrieving today's date along with the current time. If the deadline value in the database is null, it will fetch the current datetime and format it correctly. Otherwise, ...

The usage of ngRoute clashes with the functionality of Animated Scroll

I am experiencing a conflict between my ng-route and the animated scroll feature on my website: Below is the code for my scroll element: <a href="#one" class="goto-next scrolly">Next</a> In this code, "#one" represents the section ID to scro ...

Event trigger malfunction or potential issue with index activation

.full-arrow is a unique arrow that allows selection of the next page. The .full-navigation serves as a navigation bar, consisting of boxes in a line that change color upon selection. Although the full function may not be displayed here, you can grasp the b ...

Axios delivers the index.html data to the front end of a React.js application

Iā€™m currently in the process of developing a web application using React.js for the front-end and Flask for the back-end. I attempted to establish a connection between the two by defining a proxy server in React and enabling CORS in Flask. Everything was ...

Retrieve the original jqXHR object from the success callback of the $.ajax function

My original task is as follows: Execute a jQuery.ajax() request. Upon success, perform additional checks on the data received from the server. If these checks fail, reject the promise for further handling. After researching extensively online, I came up ...

Utilizing a foundational element to automatically unsubscribe from multiple observable subscriptions

Within our Angular application, we have implemented a unique concept using a Base Component to manage observable subscriptions throughout the entire app. When a component subscribes to an observable, it must extend the Base Component. This approach ensures ...

Optimizing SEO with asynchronous image loading

I've been developing a custom middleman gem that allows for asynchronous loading of images, similar to the effect seen on Medium. Everything is functioning smoothly, but I'm uncertain about the impact on SEO. The image tag in question looks like ...

Whenever I change the value of a textbox using plain JavaScript, the text becomes hidden from view

I'm struggling to understand why this function is making the textbox value invisible. I attempted changing the hidden field to a visible field, but that didn't solve the issue. Would appreciate some guidance. Here's the complete page code, p ...

Establishing foreignObject coordinates in Angular

Struggling with setting the position (x, y) for foreignObject in Angular. I have attempted the following: <foreignObject width="65" height="50" x="{{position?.x}}" y="{{position?.y}}"> <div class="c ...

Tips for showing menu only when a user scrolls on your WordPress site

I've been working on creating an effect where the menu stays hidden until the user starts scrolling. However, I can't seem to figure out why my code is not producing the desired effect. Here is the jQuery code snippet I am using: <script src= ...