多列表 JS 无响应-解网

问：

我有一个包含多个类别列表的 Excel 工作表。这些列表每天更新。我必须将这些列表显示为 HTML，并且必须运行一个脚本，以便该列表充当购物清单，每个项目都有一个添加和减去按钮。加法和减法按钮是在每个项目的隐藏乘数的基础上加减法。在数量乘以各自的价格后，每个列表将有其单独的总和，并在列表末尾给出列表总数。同样，在页面末尾生成一个总计。

为了转换它，我选择编写一个 Python 脚本，将 CSV 数据转换为具有所有功能的所需 HTML。但是JS给出了问题，没有提供正确的结果。

错误在哪里？

import csv

# Define the CSV file path 
csv_file = 'test.csv'

# Read data from the CSV file into a list of dictionaries
data = []
with open(csv_file, 'r', newline='') as file:
    csv_reader = csv.DictReader(file)
    for row in csv_reader:
        data.append(row)

# Initialize a dictionary to store shopping lists and their items
shopping_lists = {}

# Group items by shopping list
for row in data:
    list_name = row['List']
    item_name = row['Item']
    price = float(row['Price'])

    if list_name not in shopping_lists:
        shopping_lists[list_name] = {'items': [], 'total': 0.0}

    shopping_lists[list_name]['items'].append({'name': item_name, 'price': price})
    shopping_lists[list_name]['total'] += price

# Define the HTML template
html_template = """
<!DOCTYPE html>
<html>
<head>
    <title>Shopping Lists</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px;
        }

        .item {
            flex: 1;
        }

        .price {
            margin-right: 10px;
        }

        button {
            padding: 5px 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .list-total {
            margin-top: 10px;
            text-align: right;
        }

        #total {
            margin-top: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>Shopping Lists</h1>
"""

# Generate HTML for each shopping list
for list_name, list_data in shopping_lists.items():
    list_html = f"""
    <div id="list-container-{list_name.replace(" ", "-")}">
        <h2>{list_name}</h2>
        <ul class="shopping-list">
    """

    for item in list_data['items']:
        item_html = f"""
            <li>
                <div class="item">{item['name']}</div>
                <div class="price">${item['price']}</div>
                <button class="add">+</button>
                <span class="quantity">0.00</span>
                <button class="subtract">-</button>
            </li>
        """
        list_html += item_html

    list_total_html = f"""
        </ul>
        <div class="list-total">
            <strong>List Total: $<span class="list-grand-total">0.00</span></strong>
        </div>
    </div>
    <script>
        const listContainer = document.querySelector('#list-container-{list_name.replace(" ", "-")}');
        const items = listContainer.querySelectorAll("li");
        const listTotalElement = listContainer.querySelector(".list-grand-total");

        items.forEach((item) => {{
            const addButton = item.querySelector(".add");
            const subtractButton = item.querySelector(".subtract");
            const quantityElement = item.querySelector(".quantity");
            const priceElement = item.querySelector(".price");

            let quantity = 0;

            addButton.addEventListener("click", () => {{
                quantity++;
                quantityElement.textContent = quantity.toFixed(2); // Display quantity with 2 decimal places
                updateTotal();
            }});

            subtractButton.addEventListener("click", () => {{
                if (quantity > 0) {{
                    quantity--;
                    quantityElement.textContent = quantity.toFixed(2); // Display quantity with 2 decimal places
                    updateTotal();
                }}
            }});

            function updateTotal() {{
                const price = parseFloat(priceElement.textContent.slice(1)); // Remove the "$" sign and parse as float
                const itemTotal = price * quantity;
                list_data.total += itemTotal; // Update list total
                listTotalElement.textContent = list_data.total.toFixed(2); // Display list total with 2 decimal places
                updateCombinedTotal();
            }}
        }});

        function updateCombinedTotal() {{
            const combinedTotalElement = document.getElementById("grand-total");
            let combinedTotal = 0;
            document.querySelectorAll('.list-grand-total').forEach((listTotal) => {{
                combinedTotal += parseFloat(listTotal.textContent);
            }});
            combinedTotalElement.textContent = combinedTotal.toFixed(2); // Display combined total with 2 decimal places
        }}
    </script>
    """

    html_template += list_html + list_total_html

# Add the combined total section to the HTML
html_template += """
    <div id="total">
        <strong>Combined Total: $<span id="grand-total">0.00</span></strong>
    </div>
</body>
</html>
"""

# Save the generated HTML to a file
output_file = 'output.html'
with open(output_file, 'w') as file:
    file.write(html_template)

print(f"HTML file '{output_file}' has been generated.")

我已经尝试了上面的代码，但按钮没有正确添加或减去，总计也无法完美工作

JavaScript Python HTML Excel CSV

多列表 JS 无响应

Multi List JS not responding

评论