Как получить элементы HTML-списка, которые были динамически сгенерированы JavaScript в Django

Надеюсь, у вас все хорошо.

В настоящее время я столкнулся с проблемой, когда мне нужно получить элементы списка HTML, которые находятся внутри формы, используя Django. Ниже приведен мой HTML код до запуска JavaScript:

        {% csrf_token %}
        <ul class="list-group my-4">
          <li id="productListing1" class="list-group-item d-flex justify-content-between align-items-center">
            
          </li>
          <li id="productListing2" class="list-group-item d-flex justify-content-between align-items-center">
            
          </li>
          <li id="productListing3" class="list-group-item d-flex justify-content-between align-items-center">
            
          </li>
          <li id="cart-total-price" class="list-group-item d-flex justify-content-between align-items-center">
           Total: PKR-0
          </li>

В настоящее время список пуст. После нажатия кнопки для подсчета итогов HTML-код принимает следующий вид:

<ul class="list-group my-4">
          <li id="productListing1" class="list-group-item d-flex justify-content-between align-items-center">Juice PKR-40</li>
          <li id="productListing2" class="list-group-item d-flex justify-content-between align-items-center">Juice PKR-40</li>
          <li id="productListing3" class="list-group-item d-flex justify-content-between align-items-center">Juice PKR-40</li>
          <li id="cart-total-price" class="list-group-item d-flex justify-content-between align-items-center">Total: PKR-120</li>
        </ul>

Теперь я хочу заставить Django читать все эти элементы списка. Я попытался следовать этому вопросу для выполнения этой задачи. Однако, когда я добавляю скрытые теги ввода, JavaScript не может выполнить вычисления, и последний элемент становится:

<li id="cart-total-price" class="list-group-item d-flex justify-content-between align-items-center">Total: PKR-NaN</li>

Я застрял на этой простой на вид проблеме уже целый день, я буду благодарен, если вы сможете помочь мне с этим!

Для справки, мой код JavaScript, используемый для обновления элементов списка и подсчета итогов, также приведен ниже:

function addItemToCart(productTitle,productPricePKR)
{
  var itemListing=document.getElementsByClassName('list-group-item')
  for (var i=0;i<itemListing.length;i++)
  {
    if (itemListing[i].innerHTML.trim().length==0)
    {
      itemListing[i].innerHTML=productTitle + " " + productPricePKR
      break;
    }
  
  }
}

function cartTotal()
{
var listItems=document.getElementsByClassName('list-group-item')
var total=0
for (var i=0;i<listItems.length-1;i++)
{
  if (listItems[i].innerHTML.trim().length==0)
  {
    break;
  }

  else
  {
    var cartItemDesc=listItems[i]
    cartItemDesc=listItems[i].innerHTML
    var cartItemPrice = cartItemDesc.substring(cartItemDesc.indexOf('-') + 1);
    //console.log(cartItemPrice)
    var price=parseFloat(cartItemPrice)
    total=total+price
  }
  
  document.getElementById('cart-total-price').innerHTML="Total: PKR-" + total
}
}

где productTitle - название продукта, а productPricePKR - цена продукта.

Вернуться на верх