Executing a JavaScript function without passing arguments does not yield the desired result

Within my JS file, I encountered an issue when trying to call one function from another. Initially, I called the function with no arguments using only its name handleResponse. However, when attempting to add arguments by changing the function signature, I did not receive the desired outcome. I then tried calling the function as handleResponse(), but that also failed.

The question arises: Why am I unable to call my function using brackets or pass arguments?

Below are the functions:

function sendRequest()
{
    var username = "";
    var game_id = -1;
    username = document.getElementById("username").value;
    game_id = document.getElementById("game_id").value;
    req.open('GET', 'check_for_opponent.php?username='+username+'&game_id='+game_id);
    req.onreadystatechange = handleResponse(username, game_id); <--- THIS IS THE CALL
    req.send(null);
}

Function Being Called (with changed irrelevant body):

function handleResponse(username, game_id) {
if(req.readyState == 4) {
    // DO SOMETHING...
    }
}

Answer №1

Make sure to enclose the call within an anonymous function:

    req.onreadystatechange = function() {
      handleResponse(username, game_id); <--- THIS IS THE CALL
    };

The snippet you provided will trigger the handler immediately upon assignment. To avoid this behavior, assign a function that will be executed when the ready state changes.

Answer №2

Make sure to assign a function reference to onreadystatechange without immediately running the function. Utilize closures to accomplish the desired behavior.

req.onreadystatechange = function(){
    handleResponse(username, game_id);
}

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 can I ensure that my script reruns when the window is resized?

Clearly, the question is quite straightforward... I have a script that is drawing graphics across the window. Currently, when I resize the window (e.g., make it full screen), the script only responds to the original size of the window. It should refresh a ...

Loading jQuery on an ajax request

The loader is working with the code now, but it is not replacing and calling the URL. The ajax url call should be placed within searchable. <button onclick="myFunction()">LOAD</button><br /><br /> <div class="spinner bar hide" ...

Encountering an issue while attempting to iterate through JSON response

After receiving a JSON response from the server: [{"id":605,"vote":1},{"id":606,"vote":-1},{"id":611,"vote":1},{"id":609,"vote":-1}] I attempt to iterate through the results and access the properties of each object: success: function (data) { $.each(da ...

Guide to developing a personalized useReducer with integrated decision-making and event activation

I am interested in creating a custom hook called useTextProcessor(initialText, props). This hook is designed for managing and manipulating text (string) within a React state. It utilizes useReducer to maintain a cumulative state. Here is the implementation ...

Excel-like JSON Data Grid using jQuery

I am in need of a data grid similar to an Excel sheet. My primary focus is on filtering capabilities only (refer to the image below). Can anyone offer assistance with this? ...

Refresh the calendar to retrieve updated information

Utilizing the "events" elements of fullcalendar to retrieve data dynamically has been successful so far and I am satisfied with it. However, I am facing a challenge in passing a GET/POST parameter to the PHP page and refreshing the call to incorporate the ...

When implementing a v-for loop in Vue.js with Vuetify and using v-dialog components, the click event may be overwritten for all v-dialogs except

My app features the utilization of a Vuetify v-dialog within a v-for loop. However, I am encountering an issue where clicking on any chip within the loop triggers the click event for the last v-chip, instead of the specific one being clicked. It appears t ...

Transform the array of objects into different clusters

I am facing a challenge where I have an object returning two arrays of objects from an API. My goal is to transform this data into a new array of objects in order to effectively group the information for the Vue v-select component. For a visual representat ...

Avoid consistently updating information

I am experiencing a strange issue in my project. I have 2 tabs, and in one tab, there are checkboxes and a submit button. The user selects items from the checkboxes, and upon clicking the button, they should see their selections in the other tab. This fu ...

I could not retrieve data from the Promise {} object

Currently, I am in the midst of developing a discord bot using discord.js. When attempting to retrieve the target user, I utilize the following code: let target = message.guild.members.fetch(id). This method yields either Promise { <pending> } if the ...

The JSX function seems to be malfunctioning, as the function part is not displaying on the webpage as intended

This code snippet is a part of a React component in a project. I have imported a CSS file for styling and have already integrated Material UI. However, the function for the new article is not displaying on the webpage as expected. import "./Widgets. ...

Ajax versus embedding data directly into the HTML code

Currently, my project involves a combination of JavaScript with jQuery and communication with a Django backend. Some aspects of the user interface require Ajax due to the fact that data to be sent is dependent on user input. On the other hand, there is c ...

What is the process for reaching application-level middleware from the router?

Within my project created using express application generator, I am facing a challenge accessing my application-level middleware from the router. This middleware is specifically designed to query the database using the user ID that is received from the ro ...

Comparing two inherited classes in Typescript: A step-by-step guide

Let's say we have two classes: Animal and Dog. The Dog class is a subclass of the Animal class. I am trying to determine the types of these objects. How can I accomplish this task? class Animal {} class Dog extends Animal {} //The object can be of ...

What is the most efficient method for retrieving an element using a data attribute with an object (JSON) value?

Imagine having the following HTML element: <div class='element' data-info='{"id":789, "value":"example"}'></div> By running this JavaScript code, you can access the object stored in the data attribute. console.log($(&apos ...

The issue with Multiselect arises when the array is being set up initially

Using primeng Multiselect, I have implemented a logic to push data based on search value from the backend. To avoid the error of pushing undefined elements, initialization is required before pushing. However, when I initialize the dropdown's array var ...

What is the best way to create a test for my Vue component using Jest?

Below is the login form component that needs to be tested for various scenarios: Verify successful login with both username and password filled Check for input error when either username or password is left blank Ensure input error is thrown when only us ...

Troubleshooting Socket.IO Communication: Client's emits not reaching server

I have implemented a real-time notification service in a web app using Express and Socket.IO. The client can successfully connect to the server and receive emits from it. However, I am facing an issue where the server is not receiving emits from the client ...

Android canvas is experiencing a sudden freeze

My canvas-based javascript application is functioning on android, however, I am encountering a problem where dragging across the screen with my finger causes the entire web page to freeze. Is there a solution to prevent this issue from happening? ...

Material-UI icons refusing to show up on the display

I've been working on creating a sidebar component and importing various icons to enhance the UI, but for some reason they are not displaying on the screen. I even tried other suggested solutions without success. <SidebarOption Icon = {InsertComment ...