What is the best way to utilize a parent variable in child JavaScript code?

This code utilizes inheritance where the child adds something to the scene that is declared in the parent. How can this be achieved without causing an error when trying to access the scene in the child level?

 function Parent(domElement, renderStatistics) {
    this.scene = new THREE.Scene();
}
function Child(domElement) {
    Parent.call(this, domElement);
    this.init();
}
Child.prototype = Object.create(Parent.prototype);

Child.prototype.constructor = Young;

Child.prototype.init = function () {
    function createLab(geometry) {
        var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
        this.scene.add(mesh); // This causes an error: Cannot call method 'add' of undefined
    }
}

Answer №1

child.prototype.initialize = function () {
var _this = this;
    function generateDesign(geometry) {
        var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
        _this.scene.add(mesh);  
    }
}

Answer №2

It seems that the reason for your error is the usage of double equals = = on the second line.

This is causing the assignment of the value to be a boolean instead of creating a new instance of THREE.Mesh as intended.

Answer №3

It seems unnecessary to have an inner function within the init function...

You could try one of the following approaches:

child.prototype.init = function () {
    var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
    this.scene.add(mesh);  // encountering error: Cannot call method 'add' of undefined
}

Alternatively,

function createLab(geometry) {
    var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
    this.scene.add(mesh);  // encountering error: Cannot call method 'add' of undefined
};

child.prototype.init = function () {
    createLab.call(this, whatever);
}

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

A dynamically-generated dropdown element in the DOM is being duplicated due to JavaScript manipulation

Currently, I am dynamically adding a dropdown element to the page using javascript. The goal is for this dropdown to modify the properties displayed on a map. However, when attempting to add the element after the map loads, I encounter an issue where the d ...

Having issues sending multiple variables to PHP through Ajax

Trying to pass three variables through the URL using Ajax - one constant and two from a date picker. The constant passes fine, but the date variables are only passing as their names. Here's the code for the date pickers: <tr> ...

Issue with Bootstrap error class not functioning in conjunction with hide class

I need to create a form that slides down two input fields when an error occurs, and I want them to have the bootstrap error class. The 'error' class works fine without the 'hide' class being present, but when the 'hide' class ...

ES6 Generators: lack of informative stack trace when using iterator.throw(err)

The ES6 approach: iterator.throw(err) is often explained as inserting an exception as if it happened at the yield statement within the generator. The challenge lies in the fact that the stack trace of this exception does not include any information about t ...

How do we handle parent elements of clicked elements using Javascript event delegation?

http://jsfiddle.net/walkerneo/QqkkA/ In the realm of Javascript event delegation, there are many discussions related to using it for elements that serve as targets for click events. However, a less explored topic is how to implement event delegation for e ...

Struggling with conditionally rendering components or elements in React while managing state

I am currently working on a react login/signup form where the user lands on the signup section by default. My goal is to display the login section when the user clicks on the login button and show the products section when the user clicks on "Get Started" ...

Guide for configuring Quirks mode for Documents in asp.net

Currently, I am using Internet Explorer 10 and I am looking to set the Document mode of the browser to normal Quirks instead of IE 5 quirks for my website. I have tried adding <meta http-equiv="X-UA-Compatible" content="IE=10;IE=9;IE=edge"> in my m ...

Using the "this" keyword is required for an Angular Service-created function

Although this question leans more towards JavaScript than Angular, I encountered an issue while creating a service. The function call looked like this: // controller injects activityApi , then service function call is made var activities = activityApi.get ...

Is there a way to assign a null value to an empty material UI text field when submitting the form, rather than an empty string?

One issue I am facing is that the default value of the text field is zero, but when I submit the form, the value of the text field becomes an empty string instead. This is not the intended behavior as I want the value to remain zero in the end. How can I r ...

Retrieve the image and insert it using an img tag

Working on a project, I want to include Instagram profile pictures by embedding them. Although I have the image URL, I am struggling to integrate it into my HTML page. Take a look at this sample: This provided link displays the Instagram profile picture. ...

How to automatically close a Bootstrap modal after submitting a form

I am facing an issue with a Bootstrap modal dialog that contains a form. The problem is that when I click the submit button, the form is successfully submitted but the modal dialog does not close. Here is the HTML code: <div class="modal fade" ...

What is the best way to retrieve a variable within an AngularJS controller?

I am working with a binding parameter eid: '@' Inside my constructor, you will find the following method: this.$onInit = () => { console.log('eid: ', this.eid) } console.log("eid in another section: ", this.eid) Upon running t ...

Unable to modify border color for Material-UI OutlinedInput

Having some trouble changing the border color of a v4.13 MaterialUI Outlined Input. No luck with CSS overrides. Tested multiple CSS rules targeting different elements, such as select and OutlinedInput. Here are my latest attempts. What am I missing? cons ...

Understanding variable scope in Node.js routing with Javascript

Consider the following code snippet: app.get("/location1", function(req, res){ async_function().then(result => { var str = result.toString(); }).catch(...)..... }); There are variables defined inside the .then() block of the asynchronous ...

Obtain the URL for the JavaScript code that is currently running

Can anyone help me find the URL of the JavaScript currently being executed? I am aware of using window.location.href for the current page, but that doesn't necessarily provide the path to the script that is running. Any assistance would be greatly ap ...

What is the best way to create a new variable depending on the status of a button being disabled or enabled

Imagine a scenario where a button toggles between being disabled when the condition is false (opacity: 0.3) and enabled when the condition is true (opacity: 1). Let's set aside the actual condition for now -- what if I want to determine when the butt ...

Incorporate a Font Awesome icon link within ReactJS for enhanced design and functionality

I am using Typescript and ReactJS to work on adding a link to font awesome icons. Below is a snippet of my code: import React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faRandom } from &apos ...

When employing UI-Router, custom directives may not function properly within nested views

I was developing an angular application using phonegap, ionic, and angular. I had created a custom directive that registered an event listener for the element to activate iScroll upon loading. Initially, the directive worked perfectly when all the views we ...

Tips for controlling the last size in a CSS grid

<div class="grid-layout"> <img class="grid-item unview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png"> <img class="grid-item unview" src="https://s3-us-west-2.amazonaws.co ...

Tips for avoiding html entities in a string

To prevent any user-entered content from being interpreted as HTML, I need to escape it so that special characters like < become < in the markup. However, I still want to wrap the escaped content with actual HTML tags. The goal is to ensure that the ...