Django：Javascript 錯誤，警報框顯示值

Question

我正在創建一個用作雜貨店的 web 應用程序。 我設置它的方式是讓客戶可以進入網站，點擊他們想要購買的商品，然后點擊提交按鈕購買這些商品。 我遇到的問題是我的 Javascript 沒有打印正確的值。 在這兩個地方，它都說未定義。 我將在下面放一張圖片以供參考。

視圖.py

def inventory(request):
    products = request.POST.getlist('products')
    for product in products:
        a = Post.objects.get(title=product)
        a.quantity = a.quantity -1
        a.save()
    print(products)
    return redirect('blog-home') 

主頁.html

{% extends "blog/base.html" %}
{% load static %}
{% block content %}
    <form action="{% url 'js' %}" method="POST" id="menuForm">
      {% for post in posts %}
        {% if post.quantity > 0 %}
            <article class="media content-section">
              <div class="media-body">
                <div class="article-metadata">
                  <a class="mr-2">{{ post.category }}</a>
                </div>
                <h2><a class="article-title" >{{ post.title }}</a></h2>
                <p class="article-content"> Price: ${{ post.Price }}</p>
                <p class="article-content"> Sale: ${{ post.Sale }}</p>
                <input type="checkbox" id="product_{{ post.id }}" value="{{ post.title }}" form="menuForm" name="products" > Inventory count: {{ post.quantity }}
              </input>
              </div>
            </article>
        {% else %}
        {% endif %}
      {% endfor %}
      <button id="btn" type="submit" form="menuForm">Confirm Purchase</button>
    </form>
<script src="{% static "JS/javascript.js" %}" type="text/javascript"></script>
{% endblock content %}

javascript.js

function getSelectedCheckboxValues(name) {
    const checkboxes = document.querySelectorAll(`input[name="${name}"]:checked`);
    let values = [];
    checkboxes.forEach((checkbox) => {
        values.push(checkbox.value);
    });
    return values, tPrice;

var price = 0;
var tPrice =0;
if (values=='Milk'){
    var MPrice = 3.99
    tPrice = price+MPrice;
}
if (values == 'Cheese'){
    var CPrice = 4.50
    tPrice = price + CPrice;
}
if (values == 'Yogurt'){
    var YPrice = 1.99
    tPrice = price + YPrice;
}
}

const btn = document.querySelector('#btn');
btn.addEventListener('click', (event) => {
    alert('You ordered: ' + getSelectedCheckboxValues('products')+
        '\nTotal Price: $'+ getSelectedCheckboxValues('tPrice'));
});

Answer 1

首先，當您在警報中調用它們時，您將參數作為字符串傳遞給 function getSelectedCheckboxValues ，這是完全錯誤的。 此外，您還直接將值列表與字符串進行比較，這是不可能的。 您需要遍歷列表，然后將不同元素與不同產品進行比較。 我還將建議創建一個 object 而不是列表，並將產品名稱作為鍵，將其價格作為值。