Javascript：如何显示输入值的总价？答案

【问题标题】：Javascript: How can I display the total price for the values that are inputted into it?Javascript：如何显示输入值的总价？
【发布时间】：2021-03-26 00:10:45
【问题描述】：

我正在创建一个用作杂货店的项目。客户将单击复选框，然后单击提交按钮，提示警报以显示已单击的值和总价。

home.html

    <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>

javascript.js

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

console.log(values)
var price = 0;
var tPrice = 0;
for (var i = 0;i<values.length;i++){
    if (values[i] == 'Milk'){
        var MPrice = 3.99
        tPrice = price+MPrice;
    }
    if (values[i] == 'Cheese'){
        var CPrice = 4.50
        tPrice = price + CPrice;
    }
    if (values[i] == 'Yogurt'){
        var YPrice = 1.99
        tPrice = price + YPrice;
        }
console.log(values[i])
}

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

我目前的问题是警报只显示选择的值。但是，它不会打印总价。如果有人能帮我解决这个问题，我将不胜感激。

【问题讨论】：

请以简单的 HTML、CSS 和 JS 形式发布相关代码示例。消除 django 代码
我的项目是在 Django 中构建的，因此我无法在删除其中的 Django 部分后发布代码。如果这让事情变得更加混乱，我深表歉意

标签： javascript html css django django-templates

【解决方案1】：

您需要对脚本进行一些更改。

您的 values 变量在 getSelectedCheckboxValues 函数中声明，因此您无法在函数外访问该变量。

因此，只需将所有内容移至您的 getSelectedCheckboxValues 函数并返回一个包含 values tPrice 的对象

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

    var price = 0;
    var tPrice = 0;
    for (var i = 0; i < values.length; i++) {
        if (values[i] == 'Milk') {
            var MPrice = 3.99
            tPrice += price + MPrice;
        }
        if (values[i] == 'Cheese') {
            var CPrice = 4.50
            tPrice += price + CPrice;
        }
        if (values[i] == 'Yogurt') {
            var YPrice = 1.99
            tPrice += price + YPrice;
        }
        console.log(values[i])
    }

    return {values, tPrice};
}

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

【讨论】：