CODEWITHSUNDEEP
javascriptclassecmascript-6
Jaeeun Lee
Jaeeun Lee

Reputation: 3196

Function from imported class is undefined

I'm trying to set up an app using ES6 classes for the first time, but having difficulty calling a function from an imported class.

The Class to be imported: 

import {BaseElement} from './ui/base-element.js';

export class Product extends BaseElement {
constructor() {
    super()
    this.toggleAttributes();
}

// show more attributes toggle
toggleAttiributes () {
    const toggleButton = document.querySelectorAll('.smrt42-toggle-attr')
    document.addEventListener('click', (e)=>{
        const t = e.target;
        if(t.className.indexOf('smrt42-toggle-attr') !== -1) {
            e.preventDefault()
            let productAttrs = t.parentNode.previousElementSibling
            if(t.classList.contains('smrt42-toggle-attr-more')) {
                productAttrs.classList.add('smrt42-attr-open')
            } else if (t.classList.contains('smrt42-toggle-attr-less')) {
                productAttrs.classList.remove('smrt42-attr-open')
            }
        }

    })
}
}

Importing the Class here:

import {BaseElement} from './ui/base-element.js';
import {Product} from './product.js';

export class Content extends BaseElement {

constructor() {
    super()
       let p = new Product() ;
    }
}

This gives a console error this.toggleAttributes is not a function

Upvotes: 0

Views: 201

Answers (1)

Suren Srapyan
Suren Srapyan

Reputation: 68655

You have mistyped the name of the function. In declaration you have the name toggleAttiributes, but you call it as toggleAttributes. Extra i is here

toggleAttiributes
---------^-------

Upvotes: 2

Related Questions