Get the value of a function that was previously assigned to an onclick event using JavaScript

Here is the code snippet I am currently working with:

document.getElementById(myid).onclick = function() {
    HandleGPIO(val1, val2);
};

if (console) {
    console.log(document.getElementById(myid).getAttribute('onclick'));
}

My goal is to determine how the function HandleGPIO() was assigned.

Does anyone know an effective way to debug this? The getAttribute method doesn't seem to be working in this case and only returns null.

Answer №1

Retrieve the content of onclick using this code snippet:

console.log(document.getElementById(myid).onclick.toString());

To inspect the function's input values, we can make it return them. By utilizing an argument, we segregate debugging logic from regular execution logic:

for (var i = 0; i < arr_inputs.length; i++) {
    (function(i) {
        document.getElementById(arr_inputs[i]).onclick = function(debug) {

            if(debug === true) {
                return [arr_inputs[i], 0];
            }
            else {
                HandleGPIO(arr_inputs[i],0);
            }
        };
    })(i);
}

Simply invoke the function with the argument set to true like so:

console.log(document.getElementById(myid).onclick(true));

This will output an array containing the values passed to this function instance.

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

Fancybox options in Jquery don't seem to be functioning properly

Here's my code snippet: The box is displaying correctly, but for some reason, none of the options I set seem to be taking effect! This is the HTML for the popup: <div id="fb-pop"> <div id="fb-content"> <div class="fb-txt"& ...

How can I implement a progress bar that mimics an exchange platform behind data-table components? [Using Vue and Vuetify]

I am working on a cryptocurrency exchange book simulator and I am trying to implement a progress bar that will be displayed behind the values in a table. https://i.stack.imgur.com/9gVsY.png This is the template for my data-table: < ...

Every time I run `npm install`, I consistently encounter the `code ECONNREFUSED` error message for every

`npm ERR! code ECONNREFUSED npm ERR! errno ECONNREFUSED npm ERR! FetchError: request to http://registry.npmjs.org/body-parser failed, reason: connect ECONNREFUSED 127.0.0.1:3000` I attempted various solutions such as adjusting proxy settings and running ...

Text To Appear Gradually When Button Is Clicked

Is it possible to create a fading effect for text when a button is clicked? Currently, my code displays some text as block while hiding the rest with display:none. Take a look at my JavaScript code: <script> //Select button by id const btn1 ...

Tips on creating a transition in React to showcase fresh HTML content depending on the recent state changes

I am completely new to React and recently completed a project called Random Quote Machine. The main objective was to have a method triggered inside React when the user clicks a button, changing the state value and re-rendering to display a new quote on the ...

org.openqa.selenium.WebDriverException: unexpected issue: Chrome failed to initiate: crashed.(chrome inaccessible)

Having issues running Java script (selenium framework) on Chrome. Tried various solutions but still facing problems: Unchecked run as admin Added arguments Snippet of the code: ChromeOptions options = new ChromeOptions(); //options.setExperimentalOption ...

Display the table upon completion of the form submission

I am trying to create a form where the table #mytable is only displayed after the form has been submitted. If nothing is entered in the form, the table should remain hidden. Any suggestions on how I can achieve this? <form action="" id="myform" method ...

meteor Error: IDENTIFIER is missing

I recently started following the Angular-Meteor framework tutorial () but I encountered an error towards the end that I'm struggling to resolve. Despite my efforts in looking for a solution, my limited understanding of the framework seems to be hinder ...

Angular.js - index template fails to execute controller, but other templates work flawlessly

I am facing a strange issue with my Angular application that uses ngRoute. I have set up different controllers for each template in the routes.js file: routes.js: angular.module('PokeApp', ['ngRoute']) .config(function($routeProvide ...

What causes the index to consistently be the final index when passing it to the MenuItem onClick function while iterating over a State array using map?

There is an array of objects living in a state named talks [ { "firstName": "B", "lastName": "W", "day": "2022-09-30T23:06:26.000Z", "reasons": [ ...

Utilize the HTML5 video tag with a width set to 70%

I'm looking to create a video element that is 70% of the screen width, while maintaining a height aspect ratio of 100%. Currently, I have a video background that spans the full width. Using Bootstrap v4. <body> <video poster="assets/img/gp ...

Looping through AJAX calls

Currently, I have a dataset that needs to be displayed on my webpage. Each item in the list has a unique identifier. Every item represents a bar and there is a corresponding document for bars that are visited by at least one user. If a bar has no visitors ...

Leveraging Vue.js to showcase API information through attribute binding

My application is designed to allow a user to select a Person, and then Vue makes an API call for that user's posts. Each post has its own set of comments sourced from here. You can view the codepen here Here is my HTML structure: <script src="h ...

Differences between React's useCallback and useMemo when handling JSX components

I have created a custom component called CardList: function CardList({ data = [], isLoading = false, ListHeaderComponent, ListEmptyComponent, ...props }) { const keyExtractor = useCallback(({ id }) => id, []); const renderItem = useCallba ...

What is the best way to extract data from user input and display it in a table modal?

I need to retrieve all the values from the 'input' fields and display them in a modal table using JavaScript. What is the best way to achieve this? Here is my current script: <script> $(document).ready(function() { ...

Error: Invariant Violation - The text string must be enclosed within a <Text> component

Hey there, I hope you're doing well! So, I've been diving into the world of React-Native to build a weather app. Everything was going smoothly until I encountered this pesky error: Text strings must be rendered within a <Text> component. - ...

Create a seamless transition between point X,Y and point X1,Y1 through animated movements

Is there a way to smoothly move an image (or element) from its current X, Y position to X1, Y1? If the difference between X and X1 is equal to the difference between Y and Y1, it's straightforward. But what if the X difference is 100px and the Y diff ...

What is the most effective way to reduce the length of user input in a textarea and set limits on both the maximum

Is it possible to adjust the length of input and textarea and show the remaining words left? My goal is to have a total length of 200 characters for both input and textarea fields. <input type="text" id="b" name="b" value="Hi world !" maxlength="50"&g ...

Sharing methods between two components on the same page in Angular can greatly improve code efficiency

On a single page, I have two components sharing some methods and properties. How can I utilize a service to achieve this? See the sample code snippet below... @Component({ selector: 'app', template: '<h1>AppComponent1</h1>' ...

What is the process for incorporating a personalized validation function into Joi?

I have a Joi schema and I am trying to incorporate a custom validator to validate data that cannot be handled by the default Joi validators. Currently, my Joi version is 16.1.7 const customValidator = (value, helpers) => { if (value === "somethi ...