Steps to toggle click events on a button asynchronously

I am looking to create click events that can toggle a button's text between "on" and "off" states indefinitely. Currently, when I click the button once, the text changes to "Reset Filter," and on clicking again, it reverts back to "Filter" due to the nested event listener. However, I want to be able to continuously switch between these two states.

Despite attempting while loops and other methods, I have realized that this might require an asynchronous approach.

const filterBtn = document.getElementById('filter-btn');
// Event Listener to activate filter button
filterBtn.addEventListener('click', () => {
    if (filterBtn.textContent === "Filter") {
        filterBtn.textContent = "Reset Filter";
    } else {
        filterBtn.textContent = "Filter";
    }
});    
<button id="filter-btn">Filter</button>

I am seeking a solution that allows for seamless switching between the "on" and "off" states of the button.

javascript

Answer №1

To simplify your code, maintain only one event handler and invert the text depending on the current state of the button. You can achieve this using the ternary operator as shown below:

const filterButton = document.getElementById('filter-button');
filterButton.addEventListener('click', () => {
    filterButton.textContent = filterButton.textContent === "Clear Filter"
        ? "Filter Results" : "Clear Filter";
});
        
<button id="filter-button">Filter Results</button>

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 does the useEffect React hook perform its comparison process?

One of my favorite JavaScript expressions is: []==[] // false Let's now explore what the React documentation says about skipping side effects: React allows you to skip applying an effect if certain values have not changed between re-renders. To a ...

javascriptreactjsreact-hooks

Coloring the table upon selecting a checkbox using AJAX, JavaScript, and JSP

How can I adjust the color of the entire table (every row of the table)? Currently, I can only change the color of the first row of my table. Here is my color function in JSP: function changeColor(rowID){ var row = document.getElementById(rowID); ...

javajavascriptajaxjsp

An Easy Method for Managing Files in a Node.js Directory: Editing and Deleting Made Simple

Greetings! I am currently in the process of developing a basic blog using express.js. To manage the creation, updating, and deletion of posts based on their unique id, I rely on a data.json file. For each action performed, I utilize fs.writeFile to generat ...

javascriptjsonnode.jsexpress

Guidelines for Optimizing NPM Packages: Maximizing Efficiency and Providing Multiple Import Routes

I have recently developed an NPM package that utilizes Webpack and Babel for transpiling and bundling. Within my package.json, I have specified the main file as "main": "build/index.js". Additionally, in my Webpack configuration, the entry point is set to ...

javascriptnode.jsnpmwebpackpackage.json

Replace all occurrences of a specific string throughout a extensive document in Node.js

I'm facing a challenge with handling large files in memory. I need to go through each line, replace any double quotes found, and update the file itself. Currently, I am reading the file line by line, storing it in an array, and then overwriting the sa ...

javascriptnode.jsfs

The detailed record of this run can be accessed at:

npm ERR! code ENOTEMPTY npm ERR! syscall rename npm ERR! path /usr/local/lib/node_modules/expo-cli npm ERR! dest /usr/local/lib/node_modules/.expo-cli-dKBr48UN npm ERR! errno -39 npm ERR! ENOTEMPTY: The directory cannot be renamed because ...

javascriptnode.jsreactjslinuxreact-native

Tips for sending data scraped from a website using Express

I have created a web crawler using Axios and am attempting to upload a file through Express. I currently have 10 different crawlers running with corresponding HTML form methods in Express. However, when I click the button, it downloads a blank file first ...

javascriptnode.jsexpressaxios

Using Promise to manipulate objects and arrays returned from functions

https://i.stack.imgur.com/jvFzC.png router.get('/', function (req, res, next) { var size = req.params.size ? parseInt(req.params.size) : 20; var page = req.params.page ? req.params.page>0 ? (size&(parseInt(req.params.page)-1)) : ...

javascriptarraysexpressobjectpromise

What could be causing my click event to fail to register after sorting a WebGrid with a click?

Running into an issue with my webgrid and search button. It works perfectly if I search first, updating the grid with results. But when I click on a header to sort the grid, the search button stops working. Can't seem to figure out how to solve this d ...

javascriptc#jqueryasp.net-mvc

Reloading content using AJAX

Index.php ... <form id="calculator_form" name="form" action="" method="get" > <input name="one" type="text"> <input name="two" type="text"> <input type="submit"> </form> ... <!-- reload area --> <?php if(isset( ...

javascriptphpjqueryajax

Issue with iframes crossing domains

Imagine I have a website called example.com which embeds an iframe from domain iframe.net. My goal is to extract the content of the iframe and add a parameter to display a personalized message, such as "Hi [username]". The issue I'm facing is that I ...

javascriptjqueryhtmlmootools

How come executing a function in the Node.js REPL using )( actually functions?

In JavaScript, why is it possible to call a function like this when tested with node.js: ~$ node > function hi() { console.log("Hello, World!"); }; undefined > hi [Function: hi] > hi() Hello, World! undefined > hi)( // Why does this work? Hell ...

javascriptnode.jssyntax

Using AngularJS to create a form and showcase JSON information

My code is below: PizzaStore.html: <!DOCTYPE html> <html ng-app="PizzaApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Delicious pizza for all!</title> ...

javascripthtmljsonangularjs

Codeigniter - Ajax request successful in remote server but fails in local server

I am encountering an issue with my web application that makes Ajax requests to a server using Codeigniter-php code. While the Ajax requests work fine on the local server, they do not function properly when the application is hosted on a remote server. The ...

javascriptphpjqueryajaxcodeigniter

The behavior of AngularJS checkbox and ng-change is definitely puzzling

I am facing an issue with my array structure: { key : 'abc', color: 'Red', show: true } <div ng-repeat="x in myArray"> <input type="checkbox" ng-model="x" ng-change="changeShow($index)" checked="checked" /> ...

javascriptangularjs

Guide to Capturing a Comprehensive Stack Trace Using Winston 3

Here is how I have configured my logging system: const customFormat = printf(info => { return `${info.timestamp}: ${info.level}: ${info.message}: ${info.err}`; }); const newLogger = winston.createLogger({ level: "info", format: combine( ...

javascriptnode.jsloggingwinston

What might be causing my AJAX success callback function to not function as anticipated?

I've written this code for an ajax request, but I'm struggling to figure out why the code inside the success method isn't functioning properly. Even though the network tab in my Chrome browser shows a state of 200 OK. Here is the ajax code ...

javascriptjqueryajax

Tips for filling <li> with data using ng-repeat from JSON

Working with AngularJS is a new experience for me, and I'm currently attempting to populate a dropdown list using JSON and ng-repeat. While I found ng-option for "select", I couldn't find a similar solution for using "li" elements. Here is a sni ...

javascriptjsonangularjsangularjs-ng-repeat

What is the best way to prevent an HTML table from having columns that adjust their width dynamically based on the content in the <td>?

Is there a way to create a table with equal column sizes that do not change based on the length of the data within the table? https://i.sstatic.net/Gyt4P.png In the image provided, the data under the heading "Title" seems to shift the second column to th ...

javascripthtmlcsstwitter-bootstrap-3

Guide on exporting a reducer from a Node module built on React Redux

I am currently working on a project that requires importing a component from an external node module. Both the project and the component utilize React and Redux, and I intend for them to share the same store. Below is a snippet of the reducer code for the ...

javascriptreactjsnpmreact-redux