Append HTML content through class methods-CodePudding

I'm trying to design a UI for an e-commerce type website. I'm setting all the data in class instance properties and then using a parent method to append the HTML content.

My getHTML method is called in the constructor of each child class, and it should write its own individualized HTML content to document.querySelector('.products') which is passed as "root".

However, the function doesn't actually do anything.

HTML:

</head>
    <body>
        <header>
            <h2>E-Commerce Shopping Cart</h2>
        </header>

        <img id="cart" src="images/cart.svg" alt="Shopping Cart">
        
        <div >

        </div>

        <script src="script.js" type="module"></script>
    </body>

JS classes File:

export default class Product {
    constructor(name, price) {

        //Instance properties
        this.name= name;
        this.price= price;
        this.inCart= false;
        this.cartQuantity = 0;
    }
    productInfo(name, price){
        return `${this.name} ${this.price}`;
    }

    setName(name){
        this.name = name;
    }

    setPrice(price){
        this.price = '$'   price;
    }

    isInCart(bool){
        if(bool === true){
            this.inCart = true;
        } else this.inCart = false; 
    }

    static getHTML(){
        return ``;
    }
}

export class Headphones extends Product{
    constructor(name, price, root){
        super(name, price);
        this.name= setName;
        this.price= setPrice;

        root.innerHTML = Headphones.getHTML();
        
    }

    
    static getHTML() {
        return super.getHTML()   
        `
        <figure  id="headphones">
            <img  src="images/headphones.jpg" alt="Headphones">
            <figcaption >Headphones <span> - $49.99</span></figcaption>
            <div >
                <img  src="images/bag-plus.svg" alt="Add to Cart"></img>
                <img src="images/bag-x.svg" alt="Remove from Cart">  
            </div>
        </figure>
        `;
    }
}

JS script File:

import Product from "./classes.js";
import Headphones from "./classes.js";

const product = new Product(
    "Generic Product", 10.00
);

const headphones = new Headphones(
    "Headphones", 49.99, document.querySelector(".products")
);

I'm pretty sure my issue has something to do with either the way I'm calling the getHTML function, or the way I use the super keyword in its definition. Any help is appreciated!

CodePudding user response：

You were trying to call setName and setPrice in Headphones as a global function instead of an object property; can skip that altogether since you're calling it in the super().

Below removes those lines, otherwise is modified only to skip the export/import in the snippet:

class Product {
  constructor(name, price) {

    //Instance properties
    this.name = name;
    this.price = price;
    this.inCart = false;
    this.cartQuantity = 0;
  }
  productInfo(name, price) {
    return `${this.name} ${this.price}`;
  }

  setName(name) {
    this.name = name;
  }

  setPrice(price) {
    this.price = '$'   price;
  }

  isInCart(bool) {
    if (bool === true) {
      this.inCart = true;
    } else this.inCart = false;
  }

  static getHTML() {
    return ``;
  }
}

class Headphones extends Product {
  constructor(name, price, root) {
    super(name, price);
    root.innerHTML = Headphones.getHTML();
  }


  static getHTML() {
    return super.getHTML()  
      `
        <figure  id="headphones">
            <img  src="images/headphones.jpg" alt="Headphones">
            <figcaption >Headphones <span> - $49.99</span></figcaption>
            <div >
                <img  src="images/bag-plus.svg" alt="Add to Cart"></img>
                <img src="images/bag-x.svg" alt="Remove from Cart">  
            </div>
        </figure>
        `;
  }
}


const product = new Product(
  "Generic Product", 10.00
);

const headphones = new Headphones(
  "Headphones", 49.99, document.querySelector(".products")
);

</head>

<body>
  <header>
    <h2>E-Commerce Shopping Cart</h2>
  </header>

  <img id="cart" src="images/cart.svg" alt="Shopping Cart">

  <div >

  </div>

  <script src="script.js" type="module"></script>
</body>