Почему dataset передает не всю строку?

Question

Через data-name пытаюсь передать передать название продукта в корзину покупателя. Если, например, название, которое надо передать "Ананас Голд большой Коста-Рика ~1,7 кг", то мне через dataset.name приходит только "Ананас". Почему передает только первое слово?

div_card.innerHTML = "<div class='card'>\
                         <img src="+image+" class='card-img-top'>\
                         <div class='card-body'>\
                           <h5 class='card-title'>"+product_name+"</h5>\
                            <p class='card-text'>"+price+" руб</p>\
                            <button type='button' class='btn btn-outline-primary' \
                               data-id="+id+" data-name="+product_name+" \
                               data-price="+price+" \
                               onclick='add_to_cart(this.dataset.id, this.dataset.name, \
                               this.dataset.price)'>\
                               Добавить в корзину\
                           </button>\
                          </div>\
                        </div>";


<script>
  function add_to_cart(id, product_name, price){
    console.log(product_name); // Выведет "Ананас", а не "Ананас Голд большой Коста-Рика ~1,7 кг"
    let ul  = document.getElementById('shoping_cart_list');
    let li = document.createElement('li');
    li.innerHTML = product_name;
    ul.appendChild(li);
  }
</script>

Answer 1

Как уже подсказали в комментариях, используйте для этого шаблонные строки

div_card.innerHTML = `
  <div class="card">
    <img src="${image}" class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">${product_name}</h5>
      <p class="card-text">${price} руб</p>
      <button type="button" class="btn btn-outline-primary"
        data-id="${id}"
        data-name="${product_name}"
        data-price="${price}"
        onclick="add_to_cart(this.dataset.id, this.dataset.name, this.dataset.price)">Добавить в корзину</button>
    </div>
  </div>`;

БЛОГ НА HUSL

Почему dataset передает не всю строку?

Ответы (1 шт):