-3
const cartItem=document.createElement('div');
        cartItem.className="cart-item d-flex justify-content-between text-capitalize my-3";
        
        cartItem.innerHTML = "
        <img src="${item.img}" class="img-fluid rounded-circle" id="item-img" alt="" width="50" height="50">
        <div class="item-text">

          <p id="cart-item-title" class="font-weight-bold mb-0">${item.name}</p>
          <span>$</span>
          <span id="cart-item-price" class="cart-item-price" class="mb-0">${item.price}</span>
        </div>
        <a href="#" id='cart-item-remove' class="cart-item-remove">
          <i class="fas fa-trash"></i>
        </a>";
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Zeba Malik
  • 3
  • 1
  • You can not nest same quotes in JS. Also the [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) as well as multiline strings are not working with double quotes. – JavaScript Jul 27 '21 at 07:52
  • See the answers [here](https://stackoverflow.com/questions/14610432/jquery-set-quotes-in-quote) and [here](https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript). – T.J. Crowder Jul 27 '21 at 07:54
  • Change to `cartItem.innerHTML = \`\`` – mplungjan Jul 27 '21 at 08:02

1 Answers1

1

You should use template literals instead of quotes

cartItem.innerHTML = `
        <img src="${item.img}" class="img-fluid rounded-circle" id="item-img" alt="" width="50" height="50">
        <div class="item-text">

          <p id="cart-item-title" class="font-weight-bold mb-0">${item.name}</p>
          <span>$</span>
          <span id="cart-item-price" class="cart-item-price" class="mb-0">${item.price}</span>
        </div>
        <a href="#" id='cart-item-remove' class="cart-item-remove">
          <i class="fas fa-trash"></i>
        </a>`;
B.Ch.
  • 220
  • 1
  • 10