The requested function is nowhere to be found within the confines of my Controller module

While working on a personal project, I encountered an issue where a function from another class in a separate Java file is not being found, even though it is defined in the respective class.

EventView.js:

displayEvent(event){
    this.EventTitle = event.eventName
    this.EventDate =  event.eventDay + "\n" + event.eventTime
}

EventController.js:

class EventController{

    constructor(model, view){
        this.model= model
        this.view = view

        this.onEventChanged(this.model.event_)
        this.view.bindChanges(this.handleEditEventName,this.handleEditEventDay,this.handleEditEventTime)
        this.model.bindChanges(this.onEventChanged)
    }

    onEventChanged = event => {
        this.view.displayEvent(event)
    }

The error message 

> EventController.js:13 Uncaught TypeError: this.view.displayEvent is not a function
    at EventController.onEventChanged (EventController.js:13)
    at new EventController (EventController.js:7)
    at EventController.js:31

P.S I am looking for a more efficient way to use classes from other files instead of loading all scripts in the HTML document.

javascript

Answer №1

In my opinion, it is not recommended to use arrow functions in your EventController class. This is because arrow functions do not reference the class itself through the this. It is better to declare it as a regular function like this:

class EventController{

    constructor(model, view){
        this.model= model
        this.view = view

        this.onEventChanged(this.model.event_)
        this.view.bindChanges(this.handleEditEventName,this.handleEditEventDay,this.handleEditEventTime)
        this.model.bindChanges(this.onEventChanged)
    }

    onEventChanged(event) {
        this.view.displayEvent(event)
    }
}

According to Mozilla's documentation, arrow functions are not ideal for methods because they bind to the lexical this.

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

Prevent event bubbling on a link generated by an Angular directive that includes transclusion

I am currently developing a directive that adds a link to a DIV element through transclusion. However, I am facing an issue where I want to execute specific functionality when the link is clicked without being redirected to the dummy href (in this case goo ...

javascriptangularjs

Using Mongoose with Next.js to implement CRUD operations

I have been successful in implementing POST and GET methods in my Next.js app using mongoose, but I am facing challenges with the delete operation. This is an example of my POST method located in the API folder: export default async function addUser(req, ...

javascriptmongoosenext.js

In JavaScript, navigate to a new page only after successfully transmitting data to the server

Creating a redirect page that sends data to the server before transitioning to a new page can be achieved using JavaScript as shown below. <body> <script type="text/javascript"> **** Discussion of cookie-related transactions **** document.c ...

javascript

The screen reader seems to be malfunctioning as soon as I include this particular code

//Finding the height of the header let headerHeight = document.querySelector('header'); let height = headerHeight.offsetHeight; //Adjusting the #navbarNav's top margin to accommodate the header let nn = docu ...

javascripthtmlcssbootstrap-4accessibility

Transformation of firebug console information into a function()

Snippet of JavaScript code: KT_initKeyHandler(b) Firebug console output: KT_initKeyHandler(b=keydown charCode=0, keyCode=90) Corresponding JavaScript function call: KT_initKeyHandler(?) Example: Snippet of JavaScript code: KT_event(b,c) Firebug ...

javascriptfunctionconsolefirebug

Exploring Chrome's WebUSB Functionality with AngularJS

Recently, I encountered a challenge while utilizing WebUSB APIs for Chrome through AngularJS. This particular project involves accessing an esc/pos thermal printer for the purpose of printing invoices. In typical JavaScript: HTML: <button id="connect ...

javascriptangularjswebusb

Ensure that the flex item spans the entire width of the page

I'm struggling to make my audio-player resize properly to fit the full width of my page. I can't seem to figure out what I'm missing or doing wrong... (Current Look) I'm attempting to utilize HTML custom controls to design my JSON Aud ...

javascriptcssjsonflexbox

Guide to creating "bidirectional data binding" in Vue

I have a child component that is responsible for uploading a photo. The uploaded photo is assigned to the child component's data called "photo". I need to connect the parent data called "file" with the child data called "photo". And whenever "photo" i ...

javascriptvue.jsdata-bindingcomponentsvue-component

How can I correctly export my npm package?

I have successfully developed an npm package. class Person { constructor() {} sayHello() {console.log("Hello World!")} } module.exports = Person; Upon installing the package using npm i my-package, it was integrated into my project. ...

javascriptnode.jsnpmnpm-publish

Steps to retrieve a specific key value from each object in an AJAX request

I am looking to extract the "url" key and its value from the provided code and save it in a variable. I have attempted different methods to isolate the url key as seen in my commented-out code. $.ajax({ type: 'GET', url: "url", // data: da ...

javascriptjqueryajax

Save the currently active index of the mySwiper element even after the page is

After clicking through the carousel, I want to be able to store the current index and slide back to it after a page refresh. Is there a way to save this value in a variable so that I can use the mySwiper.slideTo() method to return to the last index? In si ...

javascriptswiper.js

When the button is not clicked, the function method gets invoked in React

When I call the initiateVideoCall method first and have a button called turnOff, it seems to load first without clicking the button. I'm having trouble understanding the issue here. Can someone please help me? Thanks in advance. const constraints = {& ...

javascriptreactjs

"Having an issue with the jQuery AJAX call where the success function is not operating as expected

I attempted to retrieve information from a database using PHP by making an AJAX call with jQuery. However, I encountered an issue where the $.ajax function was not functioning as expected. There were no error messages displayed, and the console.log('s ...

javascriptjquery

What makes Safari for Windows stand out when it comes to AJAX?

What sets Safari for Windows apart when it comes to handling AJAX requests? Moreover, are there any potential issues or challenges I should be aware of? ...

javascriptwindowsajaxbrowsersafari

Having trouble accessing the value of an <asp:HiddenField> using javascript

Currently, I am setting a value to a hidden field and attempting to retrieve that value in my JavaScript code. In the declarative part of my code: <asp:HiddenField ID="chkImages" runat="server" /> <div id="main" runat="server" style="display:non ...

javascriptjqueryasp.net

What is the best way to ensure the checkbox functions correctly in this specific situation?

I am utilizing PHP, Smarty, and jQuery in the development of my website. Currently, I am working on implementing checkboxes within a Smarty template. Below is a snippet of my Smarty code related to checkboxes: <table cellpadding="5" cellspacing="0" bor ...

phpjavascriptjqueryhtmlcheckbox

What are the steps to installing a .deb file offline using Docker?

I am planning to install a .deb file on my Docker container. In my Dockerfile, I execute the following command: RUN apt-get install -y ./fonts/ttf-mscorefonts-installer_3.6_all.deb ROOT Folder |->Dockerfile |->fonts |-> ttf ...

javascriptnode.jsdockercachingdeb

Edit CSS attributes within Angular 2+ framework

When using jQuery, we have the ability to do the following: JQuery('.someStyle') .css({"background", "red"}) This allows us to directly change the CSS property in style. While working with Angular 2+, we can use [style.<property>] for ...

javascriptangularangular2-template

Need help with functions in JavaScript?

I'm struggling with understanding some code related to javascript and angularjs. I came across this line - !function(a,b,c){}(x,y,z) - and I can't make sense of it. It's something new to me and I would appreciate any help in clarifying its p ...

javascriptangularjs

Are these objects enclosed within a JavaScript array?

Are square brackets used to define arrays and curly brackets used for objects? Can you explain the following data structure: Some.thing = [ { "swatch_src" : "/images/91388044000.jpg", "color" : "black multi", "inventory" : { "F" : [ 797113, 797 ...

javascriptjquery