JavaScript error: the specified method is not a function

There is an object named devark:

var devark = {
    init: function() {
        var obj = this;
        obj.assignHandlers();
    },
    assignHandlers: function() {
        var obj = this;
        document.getElementById("menu-toggler").onclick = obj.documentFunctions[0];
    },
    documentFunctions: [
        function() {
            toggleClass(this, "opened");
        }
    ]
};

When I call the init method on window.load, it works fine. However, when it tries to call another method called assignHandlers of the object, it throws an error:

[17:54:33.192] TypeError: obj.assignHandlers is not a function

I'm puzzled as to why this error is occurring. Can someone explain?

javascriptoop

Answer №1

Just as @Bergi mentioned, the issue at hand revolves around a problem with the this value that can be resolved by implementing the following solution:

window.onload = function () {
    devark.init();
};

The key distinction between these two approaches lies in the value of this within the init function. To ascertain the actual value of this, observe the object on the left side of the dot in a method call, such as obj.someFn();. In this scenario, the value of this inside someFn will be obj. However, when you assign window.onload = devark.init;, visualize the handler being executed later on like window.onload(). Consequently, the value of this within the onload function, effectively representing the init function, will be window rather than devark.

Alternatively, you have the option to utilize Function.prototype.bind for binding a specific this value to a function.

window.onload = devark.init.bind(devark);

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

Generate a JSON document to download and be stored in browser's memory as a JSON file

Is there a way to generate a JSON (or XML) page in PHP that allows users to save the file with the correct extension in their browser? <?php header('Content-type: application/json'); echo (file_get_contents('some.json', true ...

javascriptphpxmljsonbrowser

finding the file path in meteorjs

Currently, I am facing an issue with my project in meteorjs which involves using the nodes filesystem to read a file. Regrettably, I am encountering difficulty in locating the specific file that needs to be read. This is the location of my file: Server ...

javascriptnode.jsmeteorcoffeescriptnpm

Pass data that has been asynchronously resolved from the parent component to the child component using props in Vue

Main component: <template> <div> <Nav :data="data" /> </div> </template> <script lang="ts"> // ... imports removed for clarity @Component({ components: { Nav: () => import('@/components/Nav.vue&ap ...

javascripttypescriptvue.js

Tips for adding text dynamically to images on a carousel

The carousel I am using is Elastislide which can be found at http://tympanus.net/Development/Elastislide/index.html. Currently, it displays results inside the carousel after a search, but I am struggling to dynamically add text in order to clarify to use ...

javascriptjqueryhtml

Are you ensuring compliance with licensing in your Webpack bundles?

Can webpack be used to verify license compliance? I'm looking for a way to ensure that the license headers from all modules built by webpack are included in the final output file. How can we confirm this is happening? Furthermore, I am also intereste ...

javascriptnode.jsnpmwebpackwebpack-2

Sending a C# variable to an HTML file

I’m struggling to understand how I can use jQuery to access a variable from C# named sqlReq. My main objective is to be able to input my own SQL data into a PieChart. However, I’m unsure about how to call and define C# SQL requests in HTML or jQuery. ...

javascriptc#jqueryhtml

Obtaining data via a URL and then displaying it in HTML with node.js and express.js

I am currently working on a JavaScript file where I am utilizing Node's 'request' module to make API calls, process data, and return an HTML response to the user. If you're interested, you can take a look at this snippet from my file. ...

javascriptnode.jsexpress

Sequelize: Establishing multiple connections

Currently working with Sequelize in Node, I have two tables named User and Auth: User id name Auth: id token My goal is to establish relationships between these models. A User can possess multiple Auth entries, forming a to-many relati ...

javascriptmysqlnode.jssequelize.js

What is the method to retrieve a checkbox value within a datatable when employing pagination?

I recently came across an issue with my datatable where I had implemented a checkbox in the first column of each row. However, when I attempted to check the checkbox using an AJAX call, it only worked for the first page and not for any subsequent pages. H ...

javascriptjqueryajaxcheckboxdatatable

What is the way to activate Dynamic ng-model from a controller?

I am implementing a loop in my HTML code where each iteration dynamically creates a model. Here is an example of how the loop looks: <tr ng-repeat="item in voucherItems"> <td><input type="text" ng-model="this['id-' + $index ...

javascriptangularjsangular-ngmodelng-controller

Using the setTimeout function with asynchronous tasks

I have a situation where I need to introduce a 5000ms delay before firing an asynchronous function. To accomplish this, I attempted to utilize the setTimeout() method. This async function is called within a loop that runs multiple times, and each time it i ...

javascriptjquery

Interactions between JavaScript and PHP scripts within a web application

THE SCENARIO In the midst of creating a web application that dynamically loads content by fetching data from a MongoDB database where items and their respective authors are stored in separate collections within the same database. The author's ID is s ...

javascriptphpjqueryajaxmongodb

Generating a dynamic list of reactive checkboxes in vue.js using data from API call

I'm currently working on a vue.js component that utilizes a search field to query the Google Places API (for simplicity, I've removed some details). The response from the API is a list of checkboxes representing different places. My goal is to se ...

javascriptvue.jsvue-component

Updating the color with the help of useState in React, with the use of Material

I enjoy changing the color of the icon with a click using a useState hook. I have added a click handler to the icon for this purpose. Below is the code snippet: import React, { useState } from 'react'; import './App.css'; import ThumbU ...

javascriptreactjsmaterial-uireact-hooksuse-state

Retrieve information following an Ajax call inside a pre-designed template

Upon rendering a page with data put together by EJS, the goal is to refresh a section (thirdRow) of the page whenever the user submits new data. The refreshed section should display both the newly submitted data and the existing data. Although I have obtai ...

javascripthtmlajaxexpressejs

Is it feasible to execute a cross-site request forgery attack on a URL that delivers a JSON object as a response?

I am aware of the potential for a Cross-Site Forgery Attack that can target requests returning arrays by manipulating the Array constructor. For instance, let's say I have a site with a URL: foo.com/getJson that provides the following array: [&apos ...

javascriptjsonxsssecurityxmlhttprequest

A guide on implementing the stencilFunc method in Three.js

Is it possible to utilize stencilFunc and stencilOp functions within Three.js? I attempted to incorporate code for a stencil test but encountered issues. var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer({ antialias: true, st ...

javascriptthree.js

Is selectpicker acting up?

Currently, I am troubleshooting a filter feature on a website that utilizes jQuery with JSON data. Everything was functioning properly until recently when an error started appearing: The selectpicker function is not recognized I would greatly appreciat ...

javascriptjqueryjsonbootstrap-4bootstrap-selectpicker

"Implementing a button in a flask data table: A step-by-step guide

Hello, I am facing an issue with adding a button to a Bootstrap datatable in Flask (Python) using JavaScript. Any tips or solutions would be greatly appreciated. I am trying to achieve something like this: https://i.sstatic.net/NtaB3.png I have attempted ...

javascripthtmljsonajaxflask

My goal is to programmatically eliminate captcha from a website

Is there a way to automatically remove capture from a Page using javascript (Greasemonkey)? The page's HTML structure seems complex, so any suggestions on how to achieve this would be greatly appreciated. <div class="wrapper"> <d ...

javascriptjavahtmlajax