Is it possible to nest multiple onClick events within each other?

I've been working on creating a pomodoro clock that includes both break and session timers. My approach involves using a single numpad to input data into each clock by nesting the 'click' event to set the time for each. The idea is to click on the display of the clock and then start inputting the values using the buttons available (0-9, delete, enter). However, I'm facing difficulty as I can't seem to get it to display anything for either function. I'm starting to question whether my approach is feasible. I'm seeking clarity on whether nesting 'click' events is possible and if so, what could be going wrong in my implementation. Alternatively, I'd appreciate any suggestions for achieving the desired functionality. You can view the code on this fiddle by minimizing the JS and CSS windows: https://jsfiddle.net/zackluckyf/jhe98j05/1/

 $(".session-time-clock").click(function(){
            // Code snippet here
        }); 
    });

    $(".break-time-clock").click(function(){
        // Code snippet here
    });

Answer №1

The provided snippet differs from the code in the jsfiddle demonstration. Let's refer to the content in the jsfiddle:

Here is the code you currently have:

    $("button").click(function(){
        if(input === "Start")
            {
                // execute start clock functionality
            }
        else if(input === "Pause")
            {
                // execute pause clock functionality
            }
        else if(input === "Reset")
            {
                sessionTimeClock = "00:00";
                breakTimeClock = "00:00";
            }
        return true;
    });

This is the initial time where you attach a click event listener to the "button", making it the first one triggered.

However, the variable "input" is not declared, leading to the other handlers not being invoked (resulting in an error shown in the Dev Tools console).

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

Execute JavaScript code following the completion of loading and running an external script

My goal is to dynamically load and run a third-party JavaScript file (from a different domain) and then execute some of my own code afterwards. One option I'm considering is using jQuery's $.getScript: $.getScript('https://login.persona.org ...

Serializing a mixed-type array

I have an array in TypeScript that looks like this: const baseElements: IBaseElement[] An IBaseElement contains some information: export interface IBaseElement{ a: number; b: string; } There are two classes that implement the IBaseElement interface: ...

various issues with fonts and Uncaught Eval error

I've been encountering multiple font/style errors and an uncaught eval. I have attached a picture for reference. My Angular application is not functioning properly, and I suspect these errors may be the reason. However, I am unsure of their significan ...

Uploading Multiple Files Using HTML5 and AJAX

I recently stumbled upon this simple plain JavaScript AJAX upload code (apparently jQuery's $.post doesn't work properly with HTML5 for some reason), /* If you want to upload only a file along with arbitrary data that is not in the fo ...

What is the best way to search for a specific string within an Airtable record that may also have additional data included?

By utilizing the filterByFormula method in the airtable api, I am able to query and choose records that include a specific item (string). However, this query will only return the records that exclusively have that particular string. Referencing the airtab ...

What method does the browser use to select the srcset image for loading when no sizes attribute is included?

My website features an image that is displayed in various sizes depending on the browser dimensions: Since the website is responsive, the image's width can range from 200 to over 1000 pixels, depending on the size of the browser window. We aim to sho ...

Executing a JavaScript function to interact with a nodeJS HTTP server

I'm currently setting up a basic nodeJS HTTP server. When accessing it from the browser with http://localhost:8081, everything runs smoothly. However, when I try to use a JS fetch() method, I encounter a 404 error: GET http://localhost/:8081?q=hi Ja ...

Tips for personalizing the export grid menu in angular-ui-grid?

My grid includes an external "Show Details" option that adds extra columns to the grid when clicked. https://i.sstatic.net/Fu2Qp.png The problem arises with the options for "Export all data" and "Export visible data," which can be confusing in this scena ...

Utilizing ASP.net style sheets to enhance the layout and positioning of web controls

Creating websites is new to me. I found a free CSS template online and incorporated it into my project. Take a look at this screenshot: . I added some ASP web controls (buttons and labels) to the page by dragging and dropping them from the toolbox, using ...

React: Improve performance by optimizing the use of useContext to prevent unnecessary re-renders of the entire app or efficiently share data between components without causing all

In my app, I have a Header.tsx component that needs to be accessible on all pages and a Home.tsx component where most of the content resides. The Home.tsx component includes an intersectionObserver that utilizes the useContext hook (called homeLinks) to p ...

Unable to add an item from an array to the data property in Vue.js

When fetching data from Laravel, I use the following response: $unserialize = unserialize($import->field_names); return response()->json( $unserialize, 200 ) ; On Vue JS, I can view the response using: console.log(response); The data is displayed i ...

AngularJS - implementing validation within ng-repeat for name attributes in arrays

I am currently working on a project that utilizes ASP.NET MVC 5 on the server side. As outlined in this particular post, my form on the server side is designed to accept an array of objects as a parameter. This requires me to structure the name attributes ...

Customize Cell Styling with Bootstrap Full Calendar CSS

I am attempting to implement a Bootstrap calendar feature where cells are colored green if the timestamp is greater than today's date. This can be achieved by: $checkTime > $today cell.css = green background I came across this code snippet on St ...

What is the best way to responsively center an after pseudo-element above its parent?

Looking to create a dynamic tooltip without any fixed widths or constraints on the parent element. The process seems simple enough, but I'm facing an issue with centering the after element due to an existing transform attribute of transform: translat ...

choose option without clicking submit button

I am looking to POST my values from a select box without using a submit button. I want the values to be automatically submitted when an option is selected. Although I have tried the sample code below, I am not getting the desired output: <form action= ...

Rapidly typing text into a text box using Selenium and Python

Currently, I am utilizing Selenium in conjunction with Python (Chrome driver) to populate text boxes. However, the process is taking longer than desired due to the presence of numerous textboxes. My solution involves using a series of driver.find_elemen ...

Fastify Schema Failing to Validate Incoming Requests

Currently, our backend setup involves using Node.js and the Fastify framework. We have implemented a schema in satisfy to validate user input. Below is the schema defined in schema.ts: export const profileSchema = { type: 'object', properti ...

What is the best way to display jQuery/AJAX response in a table cell?

I am struggling with a script that retrieves data from a SQL database query and need help placing the result in a specific table cell. Here is the query: <script type="text/javascript"> $(document).ready(function(){ $('.typeval').change(f ...

Invoke an AngularJS directive from a controller when clicked

Hey there! I'm currently utilizing the tg-dynamic-directive to loop through a JSON file and display the tree structure shown in the attached image. https://i.sstatic.net/Ph6Cs.png One major issue I'm facing is performance degradation when the " ...

Utilizing jQuery UI Slider for Calculating Percentage

I recently worked on an example where I incorporated 5 sliders, which you can see here: Example: http://jsfiddle.net/redsunsoft/caPAb/2/ My Example: http://jsfiddle.net/9azJG/ var sliders = $("#sliders .slider"); var availableTotal = 100; ...