使用Javascript创建购物清单

可以通过以下步骤实现：

创建一个HTML页面，包含一个输入框和一个按钮，用于添加商品到购物清单。

<!DOCTYPE html>
<html>
<head>
    <title>购物清单</title>
</head>
<body>
    <input type="text" id="itemInput" placeholder="输入商品名称">
    <button onclick="addItem()">添加</button>
    <ul id="itemList"></ul>

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

创建一个Javascript文件（例如script.js），用于处理购物清单的逻辑。

// 定义一个空数组，用于存储购物清单中的商品
var shoppingList = [];

// 获取输入框和购物清单列表的引用
var itemInput = document.getElementById("itemInput");
var itemList = document.getElementById("itemList");

// 添加商品到购物清单
function addItem() {
    var item = itemInput.value.trim(); // 获取输入框的值并去除首尾空格

    if (item !== "") {
        shoppingList.push(item); // 将商品添加到购物清单数组中
        itemInput.value = ""; // 清空输入框的值
        renderList(); // 更新购物清单列表
    }
}

// 渲染购物清单列表
function renderList() {
    itemList.innerHTML = ""; // 清空购物清单列表

    for (var i = 0; i < shoppingList.length; i++) {
        var li = document.createElement("li");
        li.textContent = shoppingList[i];
        itemList.appendChild(li);
    }
}