Executing a function on page load instead of waiting for user clicks

Question

Executing a function on page load instead of waiting for user clicks

I've been researching a problem with onclick triggers that are actually triggered during page/window load, but I haven't been able to find a solution yet.

What I need is the ID of the latest clicked button, so I tried this:

 var lastButtonId = [];//to store the latest Id
// then set up the onclick statements:
 document.getElementById('traffBut').onclick = sendButtonId('traffButton');
 document.getElementById('convBut').onclick = sendButtonId('convBut');
 document.getElementById('revBut').onclick = sendButtonId('revBut');
 document.getElementById('tranBut').onclick = sendButtonId('tranBut');
//Then here's the function to retrieve the last clicked ID:
 function sendButtonId (clickedButton)
       {
        lastButtonId.splice (0,1,clickedButton);   
         console.log(lastButtonId);
       }

However, when the page loads, the console displays this message: Click here to see console logs

I've tried various approaches to solve this issue but have been struggling with it,

Any hints or guidance would be greatly appreciated :)

Thanks in advance, J.

javascript onclick

Answer 1

Answer №1

One reason why you need to pass a function to the onclick attribute instead of a function call is because you should provide a reference to the function to be called, not actually call the function at that moment.

If you want to execute the function sendButtonId when clicking on an element with the ID 'traffBut', simply do this:

document.getElementById('traffBut').onclick = sendButtonId;

However, if you need to pass arguments to the function when it's called, you can create a new function that automatically includes these arguments using .bind method, which generates a new function with specified parameters:

document.getElementById('traffBut').onclick = sendButtonId.bind(this, 'traffButton');

Answer 2

One reason why you need to pass a function to the onclick attribute instead of a function call is because you should provide a reference to the function to be called, not actually call the function at that moment.

If you want to execute the function sendButtonId when clicking on an element with the ID 'traffBut', simply do this:

document.getElementById('traffBut').onclick = sendButtonId;

However, if you need to pass arguments to the function when it's called, you can create a new function that automatically includes these arguments using .bind method, which generates a new function with specified parameters:

document.getElementById('traffBut').onclick = sendButtonId.bind(this, 'traffButton');

Executing a function on page load instead of waiting for user clicks

Answer №1

Similar questions

What is the process for removing a selection in V-autocomplete in Vuetify?

Creating a Pre-authentication service for AWS Cognito using VueJS

What is the best way to update an array in TypeScript when the elements are of different types and the secondary array has a different type as

The logs of both the frontend and backend display an array of numbers, but surprisingly, this data is not stored in the database

Using useState to initialize a long value

When function A invokes function B, function B reciprocates by calling function A. An ESLint error is raised, stating 'functionB' was utilized prior to its declaration

Encountered a 'File is not defined' error in JavaScript when running code from the node.js command line

Unable to retrieve iFrame window due to an error

Display and conceal box using AngularJS checkboxes

Customizing the main icon in the Windows 10 Action Center through a notification from Microsoft Edge

steps for retrieving final outcome from forkJoin

Utilizing useEffect to retrieve and display an empty array in a React component

Fetching data dynamically using ajax as you scroll

When using the v-for directive to display all elements of an array, only the information of the clicked array should be listed when using the

Tips for verifying the presence of a Firestore Document reference within a JavaScript array of Document references

Exploring VueJS: Sorting objects within an array

What is causing the Invalid left-hand side error in the postfix expression at this specific line of code?

Yeoman - Storing global settings efficiently

Mask the "null" data in JSON

Is it possible to assign a deconstructed array to a variable and then further deconstruct it?