Not able to see the values of object?

Question

In the below code i have created object "cart" and i have assigned that "cart" object to "addToCart" variable but not able to see the assigned values of "cart" and "addToCart" variable in addItemToCart() method so please tell me how to create object and assign values to it

And "let span = this.template.querySelectorAll('span');" has following values

span[0].innerText  // a005h00000nCm1uAAC
span[1].innerText  // Sticky Baked Chicken Wings
span[2].innerText  // 3 it is Number

itemDetails.js

import { LightningElement,api,wire } from 'lwc';
import { subscribe,MessageContext } from 'lightning/messageService';
import FOODITEM from '@salesforce/messageChannel/FoodItem__c'
export default class itemDetails extends LightningElement {
    
    Id;
    Name;
    Quantity = "3";
    subscription = null;

    addToCart ;

    @wire(MessageContext)
    messageContext
    
    connectedCallback(){
        this.subscribeToMessageChannel(); 
    }

    subscribeToMessageChannel(){
        this.subscription = subscribe(
            this.messageContext,
            FOODITEM,
            (message) => this.handleMessage(message)
            )
    }
    handleMessage(message){
        let values = JSON.parse(JSON.stringify(message.dishName));
        this.Id = values.Id;
        this.Name = values.Name;
    }
    addItemToCart(){
    
        let span  = this.template.querySelectorAll('span');

        let cart  = {
                i : span[0].innerText,
                n : span[1].innerText,
                q : span[2].innerText
        }
    this.addToCart = cart;
    console.log("cart:-",cart);
    console.log("cart:-",this.addToCart);
    }
}

itemDetails.html

<template>
    <div>
        <lightning-formatted-rich-text></lightning-formatted-rich-text>
        <p>Id: <span>{Id}</span></p>
        <p>Name of the dish: <span>{Name}</span></p>
        <lightning-layout class="slds-m-top_x-small">
            <lightning-button title="add" icon-name="utility:add"></lightning-button>
            <p>Quantity <span>{Quantity}</span></p>
            <lightning-button title="remove" icon-name="utility:dash"></lightning-button>
        </lightning-layout>
        <lightning-button label="Add To Cart" onclick={addItemToCart}></lightning-button>
    </div>
</template>

Answer 1

Given you already have the data available within your component, I would avoid trying to get this data using a query selector and use it directly.

To construct the cart you should be able to do the following:

addItemToCart(){

    let cart  = {
            i : this.Id
            n : this.Name
            q : this.Quantity
    }
    
    this.addToCart = cart;
}