js file.... need help MARK B already in class Cart I try to let this.td get item

Question

js file.... need help MARK B already in class Cart

I try to let this.td get item data from cartItems... but what should i change

this is what i receive on console

Uncaught TypeError: this.addItemToCart is not a function

----------------------------------

// single state store
class Store {
constructor (storage) {
this.storage = storage; // assuming local storage will be passed in as storage
// these are the key name you can use in Store
this.CART_KEY = 'CART';
this.QUEUE_KEY = 'QUEUE';
this.FOODS_KEY = 'FOODS';
}

// you can get item by store.cartItems
get cartItems () {
return JSON.parse(this.storage.getItem(this.CART_KEY));
}

// to call setter, simply "assign" like store.cartItems = something
set cartItems (cartItems) {
this.storage.setItem(this.CART_KEY, JSON.stringify(cartItems));
}

get queue () {
return JSON.parse(this.storage.getItem(this.QUEUE_KEY));
}

set queue (queue) {
this.storage.setItem(this.QUEUE_KEY, JSON.stringify(queue));
}

get foods () {
return JSON.parse(this.storage.getItem(this.FOODS_KEY));
}

set foods (foods) {
this.storage.setItem(this.FOODS_KEY, JSON.stringify(foods));
}
}

class Cart {
// take dom element into JavaScript class to attachment events
constructor(root, store) {
this.root = root;
this.store = store;
this.items = this.store.cartItems;
this.init();
}

init () {
// Render a list of items under root element
this.render();
// TODO: attach remove cart items to rendered HTML
}

destroy () {
// TODO: remove all the events attached from init
}

// remove an item from shopping cart
removeItem (item) {
// TODO: logic to remove an item from cart
// call render method when the item is removed to update view
this.render();
}

placeOrder () {
// add item to statuses in store as status "in progress"
}

// render a list of item under root element
render () {
console.log(this.store.cartItems);
let tbody = this.root.querySelector('tbody');
let thead = this.root.querySelector('thead');
this.td = `${this.addItemToCart()}`
// using innerHTML to render a list of table row item under tbody
tbody.innerHTML = `<tr class="cart-table">
<td>111</td>
<td>test</td>
<td>test</td>
<tr>`
}
}

class CheckoutButton {
constructor(root, store) {
this.root = root;
this.store = store;
this.onClick = () => this.addItemToCart();
this.init();
}

init () {
this.root.addEventListener('click', this.onClick);
}

destroy () {
}

addItemToCart () {
// hint: you can use `dataset` to access data attributes
// See passing data from HTML to JavaScript from course note
let cartItems = this.store.cartItems || [];
// TODO: replace with actual item
console.log(this.root.dataset);
cartItems.push({
name: this.root.dataset.name,
price: this.root.dataset.price
});
console.log(cartItems);
this.store.cartItems = cartItems;
}
}

class StatusTable {
// take dom element into JavaScript class to attachment events
constructor(root, store) {
this.root = root;
this.store = store;
init();
}

init () {
// attach click event listener to table header row on each column
render();
}

destroy () {
// remove all the events attached from init
}

sort (columnName) {
// after sorting the array of statuses, re render item to update view
render();
}

// render rows of items under table using root.innerHTML
render () {

}
}

// DOMContentLoaded event will allow us to run the following function when
// everything is ready. Think of the following code will only be executed by
// the end of document
document.addEventListener('DOMContentLoaded', () => {
// use querySelector to find the table element (preferably by id selector)
// let statusTable = document.querySelector('');
// // use querySelector to find the cart element (preferably by id selector)
let cart = document.querySelector('.cart-table');
let checkoutButtons = document.querySelectorAll('.checkout-button');

let store = new Store(window.localStorage);
// if (table) {
// new StatusTable(table, store);
// }
if (cart) {
new Cart(cart, store);
}
if (checkoutButtons && checkoutButtons.length) {
for (var i = 0; i < checkoutButtons.length; i ++) {
new CheckoutButton(checkoutButtons[i], store);
}
}
});

Explanation / Answer

You are calling addItemToCart() function using this from Cart class which is not there. addItemToCart() function is available in CheckoutButton class. In javascript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of.  

Related Questions

Navigate

• Browse (All)
• Browse J
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.