Unidentified entity triggering an error in the console

It seemed like there wasn't anything quite like this before... at least not that I could understand with my limited experience.

I was experimenting with creating a global object that contains methods, including instructions for handling AJAX requests. After setting up an event listener for a button and running some code, I encountered the following errors in the console:

Port: Could not establish connection. Receiving end does not exist. -This was deleted-.net/:1
Uncaught ReferenceError: globOject is not defined script.js:21
Port: Could not establish connection. Receiving end does not exist. -This was deleted-.net/:1
Exception in onResRdy: TypeError: Cannot read property 'htmlRes' of undefined ContentScript.js:84

I know there are likely many mistakes in my approach here. Please let me know what additional information I should provide to receive help with this issue.

var globObject = {
sendToServer: function () {
    alert('you got to me at least!');
    var xhr;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xhr=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open('POST', 'counterDoc.php', true);
    xhr.send();
},
counterClick: function (counter) {
    alert('you got here!');
    counter += 1;
    this.sendToServer();
}};
var button = document.getElementById('submbut').addEventListener('click',globOject.counterClick(0), true);

Answer №1

  1. Make sure to correct the typo pointed out in the comments by @Bonakid. The line

    globOject.counterClick(0), true);
    should actually be
    globObject.counterClick(0), true);

  2. Instead of using globObject.counterClick(0) for the callback function, opt for globObject.counterClick. Using the former will trigger an immediate call when globObject is defined.

  3. Avoid utilizing this.sendToServer();, and choose globObject.sendToServer(); instead. In the counterClick method, this refers to

    document.getElementById('submbut')
    , which is an HTML element. Insert console.log(this) into counterClick to confirm this.

You can view a working demo here

Answer №2

make this revision

var button = document.getElementById('submbut').addEventListener('click',globObject.counterClick(0)

change it to

var button = document.getElementById('submbut').addEventListener('click',globObject.counterClick(0)

this section contains a typo

globOject.counterClick(0)

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

Tips for structuring route dependencies in Node.js and Express

Although I have a good grasp of exporting routes to an index.js file, my struggle lies in properly referencing external route dependencies without having to copy them to the top of the file. For instance, if I have the main entry point of the program (ind ...

Flashing bug in the outFunction of jquery hover()

My friends and I are working on a website for a class project, but we're running into a strange issue with the outFunction part of our hover function. Whenever the mouse hovers over an element, a grey square fades in using .fadeIn(), but then immediat ...

ng-include not functioning properly within ng-table

In the table, there is a data structure <tr ng-repeat="question in $data" ng-include="'/views/partials/questionList.html'"></tr> Within the questionList.html file: <td class="top-td" data-title="'ID'" sortable="&ap ...

From jQuery to PHP: when there's not much input

Using jQuery to send HTTP requests to my PHP page on Apache/Linux. I make sure to validate client-side to prevent empty requests. However, occasionally an empty request slips through: $_POST and $_GET collections are empty Content-Len ...

Troubleshooting Angular MIME problems with Microsoft Edge

I'm encountering a problem with Angular where after running ng serve and deploying on localhost, the page loads without any issues. However, when I use ng build and deploy remotely, I encounter a MIME error. Failed to load module script: Expected a ...

Validating dates in TypeScript

Currently, I am studying date handling and have an object that contains both a start and end date. For example: Startdate = "2019-12-05" and Enddate = "2020-05-20" My goal is to establish a condition that first verifies the dates are not empty. After tha ...

In order to display the particle-slider logo effect, the JavaScript on the page needs to be refreshed

I have a website frontend integrated from WordPress using an HTML 5 Blank Child Theme. The site features a logo effect utilizing particle slider for screen sizes greater than 960px, and a flat logo image for screen sizes less than 960px. Everything works p ...

calculation of progress bar advancement

I want to make the progress bar in my game responsive to changes in the winning score. Currently, it moves from 0% to 100%, which is equivalent to 100 points - the default winning score. But I need the progress bar to adjust accordingly based on the user-i ...

Showing a pop-up on a click of a dynamically created table row, showcasing information specific to that row

I am facing a challenge with my dynamically generated table that is based on the JSON response from an AJAX call. What I am trying to achieve is to display additional data in a modal when a table row is clicked. This would be simple if the data was hard co ...

What could be the reason for the appearance of Next.js compile indicator in my final production build?

Upon completing the development and deployment of a Next.js website, I observed that the black compile indicator continued to appear in the bottom-right corner of my browser, similar to its presence during local development. The indicator can be viewed he ...

Import a JSON file into Parse by reading and parsing it to store in the database

I am currently facing a challenge with parsing JSON data in my Parse Cloud function. After fetching the JSON file, I need to parse the data and populate one of my classes with the results. However, I'm having trouble figuring out how to properly parse ...

Interactive Google Maps using Autocomplete Search Bar

How can I create a dynamic Google map based on Autocomplete Input? Here is the code that I have written: <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeAtURNzEX26_mLTUlFXYEWW11ZdlYECM&libraries=places&language=en"></scri ...

How can default props be set for a nested object in Vue?

Here's how I've defined my props: myHouse = { kitchen:{ sink: '' } } I attempted to set the default props like this, but it didn't work as expected. props: { house: { type: Object, default: () => { ...

The test may detect a variable that was not initialized

I'm trying to understand why I get the error message "variable may not have been initialized" when testing (variable === "some text"), but I don't receive the same error when using (typeof passwordHashOrg !== 'undefined') The code that ...

Combining v-on:click and v-link in Vue.js

I'm currently working on a Vue.js application and I am in the process of creating a login system that involves multiple components. Within my App.vue component, which serves as the main component with the navigation bar, there is a button that looks ...

Having issues with the "Uncaught SyntaxError: Unexpected token <" error message

I have been able to successfully send a request to a Basecamp XML file using ajax, but I am encountering an error in Google Chrome: Resource interpreted as Other but transferred with MIME type undefined. Uncaught SyntaxError: Unexpected token < Firefo ...

Implementing ASP MVC3 - Utilizing partial views to dynamically add new HTML elements to the webpage

Currently, I have implemented an Ajax call in my ASP MVC3 view to add a new list item to the page dynamically. The process involves making an Ajax call from the view to a controller action that returns a partial view. The jQuery script is then set to use t ...

Is it possible to convert an object and/or a nested array with objects into a JSON string without relying on JSON.stringify?

Struggling to generate a correct JSON string from an object without relying on JSON.stringify(). Presenting my current implementation below - var my_json_encode = function(input) { if(typeof(input) === "string"){ return '"'+input+&apo ...

Troubleshooting a JQuery and Ajax code problem

I am encountering some issues with my code and I wanted to seek help from the knowledgeable individuals on this platform. I am working on an app using JQuery and PhoneGap which includes a login function that sends credentials to a webservice via JQUery aja ...

Calculate the date and time three months before or after a specified date

I have the following start date : 2023-09-03T00:00:00+05:30 and end date : 2023-09-10T00:00:00+05:30 My objective is to deduct 90 days from the start date and add 90 days to the end date Afterwards, I need to convert it to UTC format In order to achieve ...