CODEWITHSUNDEEP
javascripthtml
Arthur Robaeys
Arthur Robaeys

Reputation: 355

textContent inside foreach not functioning, no errors

I'm working on a schoolproject and I'm stuck with a textContent issue. Inside the HandleClickbutton function, the textContent of orderName and orderPrice aren't working. I tried doing the textcontent globally, then it did work. What I'm trying to do is, when an add button is clicked, the code checks if the target id equals one of the coffee id's from the JSON. If so, change the name and price according to the JSON info. The orders object is a counter, for every click on a target, the counter goes up so I know how much orders there are per item.

I receive no errors, so I don't know where I'm going wrong.

import data from './assets/data/coffees.json';

const orders = {
  1: 0,
  2: 0,
  3: 0,
  4: 0,
  5: 0,
  6: 0,
  7: 0,
  8: 0
};

const init = () => {
  console.log(data);
  createPriceList(data);
};

const createPriceList = coffees => {
  const ul = document.querySelector('.prices__list');
  console.log(coffees);

  coffees.coffees.forEach(coffee => {
    if (coffee.plantbased === true) {
      const li = document.querySelector('.price');
      const a = document.createElement('a');
      a.classList.add('price__button');
      const spanWrapper = document.createElement('span');
      spanWrapper.classList.add('price__button__wrapper');
      const spanName = document.createElement('span');
      spanName.classList.add('price__button__name');
      const spanAmount = document.createElement('span');
      spanAmount.classList.add('price__button__amount');
      const spanPlus = document.createElement('span');
      spanPlus.classList.add('price__button__plus');
      spanPlus.setAttribute('id', coffee.id);
      spanName.textContent = coffee.name;
      spanAmount.textContent = '\u20AC';
      const price = coffee.prices.medium;
      const newPrice = price.toFixed(2); //add 2 decimals
      const finalPrice = newPrice.replace('.', ','); //replace . with ,
      spanAmount.textContent += finalPrice;
      spanPlus.textContent = '+';

      ul.appendChild(li);
      li.appendChild(a);
      a.appendChild(spanWrapper);
      spanWrapper.appendChild(spanName);
      spanWrapper.appendChild(spanAmount);
      a.appendChild(spanPlus);

      spanPlus.addEventListener('click', handleClickButton);

    }
  });
};


const handleClickButton = e => {
  document.querySelector('.emptystate').style.display = 'none';
  document.querySelector('.hide').style.display = 'initial';
  console.log(e.target.id);
  orders[e.target.id] ++;
  console.log(orders);

  data.coffees.forEach(coffee => {
    console.log(coffee.id);
    if (e.target.id === coffee.id) {
      const orderName = document.querySelector('.order__name');
      orderName.textContent = coffee.name;

      const orderPrice = document.querySelector('.order__price');
      orderPrice.textContent = coffee.prices.medium;
    }
  });
};


init();

My html:

<!DOCTYPE html>
<html lang="nl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
  <title>The Plant-Based Barista</title>
</head>

<body>
  <main class="layout">
    <header class="header highlight spaced">
      <div class="header__titles">
        <a class="h2-like">
          The Plant-Based Barista
        </a>
        <h1 class="h1-like">What do you want<br> to order?</h1>
      </div>
      <img srcset="./assets/img/image_1.png 102w,
      ./assets/img/[email protected] 204w" sizes="102px" src="./assets/img/image_1.png" alt="coffee">
    </header>
    <section class="prices highlight spaced">
      <h2 class="visually-hidden">Price list</h2>
      <ul class="prices__list">
        <li class="price" data-id="1"></li>
        <li class="price" data-id="2"></li>
        <li class="price" data-id="3"></li>
        <li class="price" data-id="4"></li>
      </ul>
    </section>
    <section class="content spaced">
      <h2 class="title_mini">Order</h2>
      <div class="orders__wrapper hide">
        <ul class="orders">
          <li class="order">
            <div class="order__name__wrapper">
              <span class="order__amount">{amount} X</span><span class="order__name">{drink.name}</span>
            </div>
            <div class="price__wrapper">
              <span class="order__price">&euro; {total}</span>
              <button class="remove">
                x
              </button>
            </div>
        </ul>
        <p class="total">
          <span class="total__label">Total</span>
          <span class="total__price">&euro; <span> 0,00</span></span>
        </p>
      </div>
      <div class="emptystate">
        <img srcset="./assets/img/coffee-maker.jpg 67w,
          ./assets/img/[email protected] 134w" sizes="67px" src="./assets/img/coffee-maker.jpg" alt="A coffee maker">

        <span class="emptystate__content">
          Please order something
          <span role="img" aria-label="Drunk emoji">
            🤪
          </span>
        </span>
      </div>
    </section>
  </main>
  <footer class="nav_bar">
    <div class="nav_wrapper nav_active">
      <img srcset="./assets/img/home.png 28w" sizes="28px" src="./assets/img/home.png" alt="home">
      <p>Home</p>
    </div>
    <div class="nav_wrapper">
      <img src="./assets/img/about.png" alt="about">
      <p>About</p>
    </div>
    <div class="nav_wrapper">
      <img src="./assets/img/admin.png" alt="admin">
      <p>Admin</p>
    </div>
  </footer>
</body>

</html>

JSON:

    {
  "coffees": [
    {
      "id": 1,
      "name": "Oat Latte",
      "plantbased": true,
      "description": "Latte coffee with oat plant milk.",
      "prices": {
        "small": 2.5,
        "medium": 3.5,
        "large": 4.5,
        "extra_large": 5.5
      }
    },

Upvotes: 0

Views: 206

Answers (1)

mplungjan
mplungjan

Reputation: 178350

console.log (typeof e.target.id, typeof coffee.id, coffee.name)

will tell you you need to quote the coffee.id in the JSON to compare with the element id which is always a string. I do not recommend using numbers as ID by the way...

  "coffees": [{
    "id": "1", // was a number


const data = {
  "coffees": [{
    "id": "1",
    "name": "Oat Latte",
    "plantbased": true,
    "description": "Latte coffee with oat plant milk.",
    "prices": {
      "small": 2.5,
      "medium": 3.5,
      "large": 4.5,
      "extra_large": 5.5
    }
  }]
}

const orders = {
  1: 0,
  2: 0,
  3: 0,
  4: 0,
  5: 0,
  6: 0,
  7: 0,
  8: 0
};

const init = () => {
  createPriceList(data);
};

const createPriceList = coffees => {
  const ul = document.querySelector('.prices__list');

  coffees.coffees.forEach(coffee => {
    if (coffee.plantbased === true) {
      const li = document.querySelector('.price');
      const a = document.createElement('a');
      a.classList.add('price__button');
      const spanWrapper = document.createElement('span');
      spanWrapper.classList.add('price__button__wrapper');
      const spanName = document.createElement('span');
      spanName.classList.add('price__button__name');
      const spanAmount = document.createElement('span');
      spanAmount.classList.add('price__button__amount');
      const spanPlus = document.createElement('span');
      spanPlus.classList.add('price__button__plus');
      spanPlus.setAttribute('id', coffee.id);
      spanName.textContent = coffee.name;
      spanAmount.textContent = '\u20AC';
      const price = coffee.prices.medium;
      const newPrice = price.toFixed(2); //add 2 decimals
      const finalPrice = newPrice.replace('.', ','); //replace . with ,
      spanAmount.textContent += finalPrice;
      spanPlus.textContent = '+';

      ul.appendChild(li);
      li.appendChild(a);
      a.appendChild(spanWrapper);
      spanWrapper.appendChild(spanName);
      spanWrapper.appendChild(spanAmount);
      a.appendChild(spanPlus);

      spanPlus.addEventListener('click', handleClickButton);

    }
  });
};


const handleClickButton = e => {
  document.querySelector('.emptystate').style.display = 'none';
  document.querySelector('.hide').style.display = 'initial';
  //  console.log(e.target.id);
  orders[e.target.id]++;
  //  console.log(orders);

  data.coffees.forEach(coffee => {
    console.log(typeof e.target.id, typeof coffee.id, coffee.name)

    if (e.target.id === coffee.id) {
      const orderName = document.querySelector('.order__name');
      orderName.textContent = coffee.name;
      const orderPrice = document.querySelector('.order__price');
      orderPrice.textContent = coffee.prices.medium;
    }
  });
};


init();
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
<title>The Plant-Based Barista</title>


<body>
  <main class="layout">
    <header class="header highlight spaced">
      <div class="header__titles">
        <a class="h2-like">
          The Plant-Based Barista
        </a>
        <h1 class="h1-like">What do you want<br> to order?</h1>
      </div>
      <img srcset="./assets/img/image_1.png 102w,
      ./assets/img/[email protected] 204w" sizes="102px" src="./assets/img/image_1.png" alt="coffee">
    </header>
    <section class="prices highlight spaced">
      <h2 class="visually-hidden">Price list</h2>
      <ul class="prices__list">
        <li class="price" data-id="1"></li>
        <li class="price" data-id="2"></li>
        <li class="price" data-id="3"></li>
        <li class="price" data-id="4"></li>
      </ul>
    </section>
    <section class="content spaced">
      <h2 class="title_mini">Order</h2>
      <div class="orders__wrapper hide">
        <ul class="orders">
          <li class="order">
            <div class="order__name__wrapper">
              <span class="order__amount">{amount} X</span><span class="order__name">{drink.name}</span>
            </div>
            <div class="price__wrapper">
              <span class="order__price">&euro; {total}</span>
              <button class="remove">
                x
              </button>
            </div>
        </ul>
        <p class="total">
          <span class="total__label">Total</span>
          <span class="total__price">&euro; <span> 0,00</span></span>
        </p>
      </div>
      <div class="emptystate">
        <img srcset="./assets/img/coffee-maker.jpg 67w,
          ./assets/img/[email protected] 134w" sizes="67px" src="./assets/img/coffee-maker.jpg" alt="A coffee maker">

        <span class="emptystate__content">
          Please order something
          <span role="img" aria-label="Drunk emoji">
            🤪
          </span>
        </span>
      </div>
    </section>
  </main>
  <footer class="nav_bar">
    <div class="nav_wrapper nav_active">
      <img srcset="./assets/img/home.png 28w" sizes="28px" src="./assets/img/home.png" alt="home">
      <p>Home</p>
    </div>
    <div class="nav_wrapper">
      <img src="./assets/img/about.png" alt="about">
      <p>About</p>
    </div>
    <div class="nav_wrapper">
      <img src="./assets/img/admin.png" alt="admin">
      <p>Admin</p>
    </div>
  </footer>

Upvotes: 2

Related Questions