Данные не копируются в новый созданный div, копируется только имя

ProgramBox

Данные не копируются в новый созданный div, копируется только имя

Post author:admin
Запись опубликована:7 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #bootstrap-4

#javascript #HTML #bootstrap-4

Вопрос:

Мой запрос:

Когда я нажимаю на кнопку Добавить, добавляется новая строка div без каких-либо данных. вместо него добавляются имена переменных. т.е. Image productTitle productPrice.

(productTitle,productImage,productPrice) при печати на консоли или предупреждении значения создаются правильно. (Product 1 ,"url",100 )

но не копируется при вызове addtocart функции через аргументы и выдает выходные данные в виде имен переменных >> (productTitle, productImage, productPrice) , а не значений

Пожалуйста, помогите

     //Java Script code 
    var addbtn =document.getElementsByClassName('addbtn');

    for(var i=0 ;i<addbtn.length;i  )
    {

        addbtn[i].addEventListener('click',function(e)
        {

          currentbtn = e.target;
          productcontainer = currentbtn.parentElement;
           productTitle = productcontainer.getElementsByClassName('product-title')[0].innerText;
           productImage= productcontainer.getElementsByClassName('product-img')[0].src;
           productPrice= productcontainer.getElementsByClassName('product-price')[0].innerText;
          // addnew( productTitle, productPrice,productImage);
          
          
      

            addtocart(productTitle,productImage,productPrice);
        });


    }
    cartContainer = document.getElementsByClassName('cartContainer')[0];
    function addtocart(productTitle,productImage,productPrice)
    {

    newdiv = document.createElement('div');
    newdiv.classList.add('row');
    insideContent ='<div class="col-sm cartImage"><img src="productImage"></div><div class ="col-sm card cartTitle">productTitle</div><div class="col-sm cartPrice">productPrice</div><div class="col-sm removeBotton" >Remove </div>';
    newdiv.innerHTML =  insideContent;
    cartContainer.appendChild(newdiv);








    }

  
//HTML code

    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="cart.css">
    
        <title>Hello, world!</title>
      </head>
      <body>
       <section>
    
    <div class="row row-cols-2 row-cols-md-3  row-cols-sm-2">
      <div class="col mb-4">
        <div class="card h-80">
            
    
          <div class="card-body  d-flex flex-column align-items-center img-fluid">
                    <img src="https://m.media-amazon.com/images/I/81bDJ8AC5HL._AC_SX180_SY120_QL70_.jpg" class="card-img-top img-fluid product-img" alt="..."id="cardimg">
            <h5 class="card-title product-title">Product1</h5>
            <p class="card-text product-price">100</p>
            <button type="button" class="btn btn-warning addbtn">Add</button>
    
          </div>
        </div>
      </div>
    
          <div class="col mb-4">
        <div class="card h-80">
       
          <div class="card-body  d-flex flex-column align-items-center ">
                <img src="https://m.media-amazon.com/images/I/61utX8kBDlL._AC_UL320_.jpg" class="card-img-top img-fluid product-img" alt="..."id="cardimg">
            <h5 class="card-title product-title">Product2</h5>
            <p class="card-text product-price">200</p>
            <button type="button" class="btn btn-warning addbtn">Add</button>
    
          </div>
        </div>
      </div>
          <div class="col mb-4">
        <div class="card h-80">
    
          <div class="card-body  d-flex flex-column align-items-center">
                  <img src="https://m.media-amazon.com/images/I/71JhEnGtlfL._AC_UL320_.jpg"class="card-img-top img-fluid product-img" alt="..."id="cardimg">
            <h5 class="card-title product-title">Product3</h5>
            <p class="card-text product-price">300</p>
            <button type="button" class="btn btn-warning addbtn">Add</button>
    
          </div>
        </div>
      </div>
        
         
        </div>
           
           
           </section>
          
     <div class="cartContainer">
      <div class="row">
        <div class="col-sm ">
          Product
        </div>
        <div class="col-sm">
          Title
        </div>
        <div class="col-sm">
         Price
        </div>
             <div class="col-sm">
          Action
        </div>
      </div>
      

      <!--This new div row content  will be added in new div-->
      <!--<div class="row">
        <div class="col-sm cartImage">
         <img src=" https://m.media-amazon.com/images/I/81bDJ8AC5HL._AC_SX180_SY120_QL70_.jpg">
        </div>
        <div class="col-sm card cartTitle">
        Product1
        </div>
        <div class="col-sm cartPrice">
         100
        </div>
             <div class="col-sm removeBotton" >
          Remove
        </div>
      </div>-->
  
    
    
    </div>
    <script src="cart.js"></script>
    </body>
    </html>

```

<!-- begin snippet: js hide: false console: true babel: false -->

Ответ №1:

В начале строки insideContent = имена ваших переменных находятся внутри текстовой строки, обозначенной одинарными кавычками в начале и в конце ( ' ).

Вам нужно изменить эту строку так, чтобы имена переменных находились за пределами текстовой строки.

Это можно сделать, объединив их.

Например:

 insideContent = 'text string'   variableName   'text string'   variableName

Применяя это к приведенному выше варианту использования, вы можете просто заменить эту строку в существующем коде на следующую:

 insideContent ='<div class="col-sm cartImage"><img src="'   productImage   '"></div><div class ="col-sm card cartTitle">'   productTitle   '</div><div class="col-sm cartPrice">'   productPrice   '</div><div class="col-sm removeBotton" >Remove </div>';

1. Спасибо за ваш ответ, я также слышал о>> insideDiv = <div class="col-sm cartImage"> <img src="${_productImage}"></div> <div class="col-sm cartTitle"> ${_productTitle} </div> <div class="col-sm cartPrice"> ${_productPrice}</div> <div class="col-sm removeButton"> Remove</div> ; знак доллара, используемый в jquery . для этого, можете ли вы объяснить это, если у вас есть какая-то информация об этом??

2. Есть ли причина, по которой вы предпочитаете jQuery? Это дополнительная зависимость. Это должно быть достижимо просто с помощью конкатенации. Вы пробовали мое решение выше? Если да, сработало ли это? Если бы это было так, вы могли бы пометить это правильно и открыть другой вопрос об альтернативе jQuery. Если это не сработало, сообщите нам, и мы устраняем неполадки / корректируем. Если вам нужно решение только для jQuery, пожалуйста, измените вопрос, чтобы указать это.

Ответ №2:

Вот полностью рабочее решение для вас с функциональностью add в корзину и remove из корзины.

Я также упростил ваше, code используя новейшие методы, такие как forEach и querySelectorAll , чтобы получить все Add — Использование getElementByClassName здесь вообще невозможно — это очень старый метод, и его не так много.

Сначала нам нужно добавить кнопки с помощью querySelectorAll , а затем использовать forEach цикл для создания EventListener для всех них.

Когда мы нажмем на add , мы передадим data нашему addtocart , а затем используем concatenation , чтобы показать цену, изображение, заголовок в корзине.

Во-вторых, мы можем использовать previousElementSibling функцию для получения предыдущего элемента currentTarget это гарантирует, что мы получаем правильные данные каждый раз, когда нажимаем на определенную add кнопку.

Наконец, я также добавил remove кнопку для каждого продукта, в который вы добавляете cart , которая позволит вам удалить добавленный нами товар из корзины, используя функцию onClick.

Живая рабочая демонстрация:

Показать фрагмент кода

 //Java Script code 
var addbtn = document.querySelectorAll('.addbtn');
var cartContainer = document.querySelector('.cartContainer')

//get all add buttons
addbtn.forEach(function(add) {
  add.addEventListener('click', function(e) {
    var currentbtn = e.target;
    var productcontainer = currentbtn.parentElement;
    var productTitle = currentbtn.previousElementSibling.previousElementSibling.innerText;
    var productImage = currentbtn.previousElementSibling.previousElementSibling.previousElementSibling.src;
    var productPrice = currentbtn.previousElementSibling.innerText
    addtocart(productTitle, productImage, productPrice);
  });
})

//Add to cart
function addtocart(productTitle, productImage, productPrice) {
  var newdiv = document.createElement('div');
  newdiv.classList.add('row');
  var insideContent = '<div class="cart_item"><div class="col-sm cartImage"><img src="'   productImage   '"></div><div class ="col-sm card cartTitle">'   productTitle   '</div><div class="col-sm cartPrice">'   productPrice   '</div><button class="btn-sm btn-warning removeBotton" onclick="removeItem(this)">Remove</button></div>';
  newdiv.innerHTML = insideContent;
  cartContainer.appendChild(newdiv);
}

//Remove from cart
function removeItem(e) {
  e.parentElement.remove() //remove from cart
}

 <html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="cart.css">

  <title>Hello, world!</title>
</head>

<body>
  <section>

    <div class="row row-cols-2 row-cols-md-3  row-cols-sm-2">
      <div class="col mb-4">
        <div class="card h-80">


          <div class="card-body  d-flex flex-column align-items-center img-fluid">
            <img src="https://m.media-amazon.com/images/I/81bDJ8AC5HL._AC_SX180_SY120_QL70_.jpg" class="card-img-top img-fluid product-img" alt="..." id="cardimg">
            <h5 class="card-title product-title">Product1</h5>
            <p class="card-text product-price">100</p>
            <button type="button" class="btn btn-warning addbtn">Add</button>

          </div>
        </div>
      </div>

      <div class="col mb-4">
        <div class="card h-80">

          <div class="card-body  d-flex flex-column align-items-center ">
            <img src="https://m.media-amazon.com/images/I/61utX8kBDlL._AC_UL320_.jpg" class="card-img-top img-fluid product-img" alt="..." id="cardimg">
            <h5 class="card-title product-title">Product2</h5>
            <p class="card-text product-price">200</p>
            <button type="button" class="btn btn-warning addbtn">Add</button>

          </div>
        </div>
      </div>
      <div class="col mb-4">
        <div class="card h-80">

          <div class="card-body  d-flex flex-column align-items-center">
            <img src="https://m.media-amazon.com/images/I/71JhEnGtlfL._AC_UL320_.jpg" class="card-img-top img-fluid product-img" alt="..." id="cardimg">
            <h5 class="card-title product-title">Product3</h5>
            <p class="card-text product-price">300</p>
            <button type="button" class="btn btn-warning addbtn">Add</button>

          </div>
        </div>
      </div>


    </div>


  </section>

  <div class="cartContainer">
    <div class="row">
      <div class="col-sm ">
        Product
      </div>
      <div class="col-sm">
        Title
      </div>
      <div class="col-sm">
        Price
      </div>
      <div class="col-sm">
        Action
      </div>
    </div>


    <!--This new div row content  will be added in new div-->
    <!--<div class="row">
        <div class="col-sm cartImage">
         <img src=" https://m.media-amazon.com/images/I/81bDJ8AC5HL._AC_SX180_SY120_QL70_.jpg">
        </div>
        <div class="col-sm card cartTitle">
        Product1
        </div>
        <div class="col-sm cartPrice">
         100
        </div>
             <div class="col-sm removeBotton" >
          Remove
        </div>
      </div>-->



  </div>
  <script src="cart.js"></script>
</body>

</html>

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

2. @ayush да, конечно. Я создал для вас рабочую скрипку JS здесь: jsfiddle.net/sa4kwt78 — вы не сможете создать продукт более одного раза. Если вы удалите тот же продукт, вы можете добавить его снова, иначе вы не сможете. Я сохранил название продукта в массиве и проверил, существует ли название продукта уже или нет.

Ответ №3:

объединить ProductImage

 insideContent ='<div class="col-sm cartImage"><img src="' productImage '"></div><div class ="col-sm card cartTitle">productTitle</div><div class="col-sm cartPrice">productPrice</div><div class="col-sm removeBotton" >Remove </div>';

1. Спасибо за ваш ответ, я также слышал о>>insideDiv = <div class=»col-sm cartImage»> <img src=»${_productImage}»></div> <div class=»col-sm cartTitle»> ${_productTitle} </div> <div class=»col-sm cartPrice»> ${_productPrice}</ div> <div class=»col-sm removeButton»> Удалить</div>; знак доллара, используемый в jquery .чтобы сделать это, можете ли вы объяснить это, если у вас есть какая-то информация об этом