Saya sedang mengerjakan proyek sekolah dan saya terjebak dengan masalah textContent. Di dalam fungsi HandleClickbutton, textContent dari orderName dan orderPrice tidak berfungsi. Saya mencoba melakukan konten teks secara global, lalu berhasil. Apa yang saya coba lakukan adalah, ketika tombol tambah diklik, kode memeriksa apakah id target sama dengan salah satu id kopi dari JSON. Jika sudah, ubah nama dan harganya sesuai dengan info JSON. Objek pesanan adalah penghitung, untuk setiap klik pada target, penghitungnya naik sehingga saya tahu berapa banyak pesanan yang ada per item.

Saya tidak menerima kesalahan, jadi saya tidak tahu di mana saya salah.

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();

Html saya:

<!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/image_1@2x.png 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/coffee-maker@2x.jpg 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
      }
    },
0
Arthur Robaeys 25 Oktober 2019, 21:05

1 menjawab

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

Akan memberi tahu Anda bahwa Anda perlu mengutip coffee.id di JSON untuk membandingkan dengan elemen id yang selalu berupa string. Saya tidak menyarankan menggunakan nomor sebagai ID omong-omong ...

  "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/image_1@2x.png 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/coffee-maker@2x.jpg 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>
2
mplungjan 25 Oktober 2019, 18:49