js实现增加商品数量

在JavaScript中实现增加商品数量的功能，通常涉及到以下几个基础概念：

基础概念

DOM操作：JavaScript可以通过DOM（文档对象模型）来操作网页上的元素。
事件监听：通过事件监听器来响应用户的操作，如点击按钮。
变量和数据类型：用于存储和处理商品数量。

实现步骤

HTML结构：创建一个显示商品数量的元素和一个增加数量的按钮。
JavaScript逻辑：编写脚本来处理按钮点击事件，并更新商品数量。

示例代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增加商品数量</title>
</head>
<body>
    <div>
        商品数量: <span id="quantity">0</span>
    </div>
    <button id="increaseBtn">增加数量</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    // 获取显示商品数量的元素和按钮
    const quantityElement = document.getElementById('quantity');
    const increaseBtn = document.getElementById('increaseBtn');

    // 初始化商品数量
    let quantity = 0;

    // 添加点击事件监听器
    increaseBtn.addEventListener('click', function() {
        // 增加商品数量
        quantity++;
        // 更新显示的商品数量
        quantityElement.textContent = quantity;
    });
});