Call upon the prototype method of the parent class

"I'm having trouble understanding a piece of my code:

       //constructor
       function Widget (options) {            
        };

       //return the string
        Widget.prototype._addEditFormString = function (val) {
            return "<input type='text' value='" + val + "' >";                
        } 
        //initializing method
        Widget.prototype.init = function () {
            var addRowButton = document.getElementsByName("addRow")[0];              
            addRowButton.addEventListener("click", this.addRow, false);                
        };
        //this context in this method is still confusing me
        Widget.prototype.addRow = function () {    
            console.log(this._addEditFormString);//Uncaught TypeError: Object #<HTMLInputElement> has no method '_addEditFormString'                  
        }  
        var wid = new Widget();

         wid.init();

The issue - In the init() method I add an event listener (addRow method), but in the addRow method, I am unsure how to reference "this" of my constructor class. I want to invoke _addEditFormString() method, but I receive "Uncaught TypeError: Object [object Window] has no method '_addEditFormString'". How can I solve this without using Widget.prototype._addEditFormString? Is that the only solution? Thank you.

Answer №1

The issue lies in the context of the event handler being set to the window rather than your Widget.

Modify

Widget.prototype.init = function () {
     var addRowButton = document.getElementsByName("addRow")[0];              
     addRowButton.addEventListener("click", this.addRow, false);                
};

to

Widget.prototype.init = function () {
      var _this = this;
      var addRowButton = document.getElementsByName("addRow")[0];              
      addRowButton.addEventListener("click", function(){_this.addRow()}, false);                
};

Edit related to your query in the comment :

You appear to be looking for

Widget.prototype._addEditFormString.call(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

Add a preventDefault event listener to a submit button that triggers a specific function

$(function() { $('#login').submit(function(e){ preventSubmission(); e.preventDefault(); }); }); function preventSubmission() { $('#btnLogin').attr('disabled','disabled'); $("#btnLogi ...

What is the best way to transform object request data into a string in an Express application using Node.js

I am trying to save the request data from app.get('/') to a variable, but I keep getting an error "TypeError: Converting circular structure to JSON". var express = require('express') var app = express() var bodyParser = require('b ...

Encountering an error message that states "Unable to access property 'props' of null object while filling

Can anyone help me figure out the error in my React component code below? import React, { Component } from 'react'; import { Input} from 'antd'; import Form from '../../components/uielements/form'; import Button from '.. ...

The first div should be hidden when the toggle is activated

I am currently working on a CRUD project and incorporating some Javascript/JQuery into it. I have a button labeled "Add", which, when clicked, displays a specific div element. However, I'm facing an issue where the div is already visible before the us ...

What are some creative ways to visually distinguish a TextField that is in readOnly mode?

I'm currently working on creating a form using the Material-UI library. I'm having difficulty figuring out how to distinguish my TextField when they are in readOnly mode versus edit mode. At the moment, they appear identical and I would like the ...

modifying prop values with Vue.js method

I'm currently diving into Vue and tackling a project that heavily relies on vue.js. My goal is to display data in a component using a prop, and now I'm looking to implement a method to increment the quantity of a product. Below is my code snippe ...

nsIProcess - Launch with Background Execution and Deferred Activation

Currently, my method of launching Firefox is as follows: var exe = FileUtils.getFile('XREExeF', []); //this provides the path to the executable var process = Cc['@mozilla.org/process/util;1'].createInstance(Ci.nsIProcess); process.init ...

Choose the minimum price from the JSON response of the API

I have made an AJAX request to an API and received the following JSON response below. I am trying to extract the lowest 'MinPrice' from the 'Quotes' data but finding it challenging to determine the best approach. One method I am consid ...

What is causing this code to run immediately upon the addition of Promise logic?

The coding scenario written below was supposed to have two 4-second delays. However, when the code is run, it executes immediately. It seems that there might be a lack of understanding on my part regarding some basic concept, or perhaps there's a hidd ...

Attempting to execute a PHP script through a JavaScript if statement

I have a form that requires validation with JavaScript. In one of the if statements, after all other conditions have been validated, I want to execute my PHP script that updates an SQL database with one of the passwords. Here is the final validation code: ...

Encountering errors while running Angular 8's ng build prod command

After successfully migrating my project from Angular 7 to Angular 8, I encountered an issue when attempting to run 'ng build prod' which resulted in the following error: ERROR in Error during template compile of 'Ng2CompleterModule' Cou ...

Exploring the Concept of Nested ViewModels in Knockout.js Version 3.2.0

I have a global view model that is applied to the main div and I also have other view models that I want to apply to nested elements within my main div However, I am encountering an issue: You cannot bind multiple times to the same element. Below is ...

Exploring Manipulation of M:N Associations in Sequelize

I have set up a sequelize schema using postgre DB export const Commune = sq.define("commune",{ codeCommune: { type: DataTypes.STRING(5), allowNull: false, primaryKey: true }, libelleCommune: { type: ...

Having an issue with utilizing the useState hook in ReactJS for implementing pagination functionality

I'm struggling to resolve an issue with the React useState. What I'm trying to achieve is making an API call to fetch movies with pagination, but for some reason one of my states is showing up as undefined and it's puzzling me. The component ...

What is the best way to display each value from the array arr, containing strings, on separate lines?

Can you complete the function below to display each value in the array 'arr' on separate lines? <!DOCTYPE html> <html> <head> <title> ...

What could be causing JavaScript fetch to only send OPTIONS requests instead of the expected calls?

I'm having an issue with my AJAX request using javascript fetch. It's only sending an OPTIONS call and not proceeding to make further calls. What's strange is that the response header seems fine, and $.ajax is working as expected. Check out ...

Ways to discreetly conceal forward and backward buttons in the v-pagination component of Vuetify

Is there a way to remove the previous and next buttons from v-pagination in Vuetify? Here's my code snippet- <v-pagination v-model="page" :length="pageCount" :total-visible="8" color="primary" /> ...

Select2 using AJAX: chosen option disappears upon receiving AJAX response

Despite going through numerous questions and answers, the issue persists. Here is an excerpt of the code in question: <div class="col-md-2"> <label for="wh_location">{{ __('reports.warehouse_movement.location') ...

Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

I am attempting to create a circular progress bar with a determinate value using Material-UI, similar to the example shown in this circular progress image. However, the following code does not display the additional circle as the background: <CircularP ...

Show the HTTP parameter only if the value is not empty

When developing a React application, I've been using the following code snippet to set a value as a URL path parameter: const [exchangeId, setExchangeId] = useState(''); ..... const endURL = `?page=${paginationState.activePage}&so ...