有没有办法循环遍历代码中的所有玩具以容纳更多玩具？-解网

问：

我刚刚完成了一个初学者 JavaScript 教程，我想创建一个简单的程序，使用下拉菜单选择数量来打印出客户想要购买的玩具数量。我在帖子中包含了 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>Toy Purchase </title>
</head>
<body>
    <h1>Pokemon Related Toys</h1>
<div>
    <h2>Pokemon plush toys</h2>
    <label for="Bulbasaurquantity">Bulbasaur Plush Quantity (from 0-5):</label>
    <input type="number" id="Bulbasaurquantity" class="plushquantity" min="0" max="5"><br>
    <label for="Plush quantity">Squirtle Plush Quantity (from 0-5):</label>
    <input type="number" id="Squirtlequantity" class="plushquantity" min="0" max="5"><br>
    <label for="Plush quantity">Charmander Plush Quantity (from 0-5):</label>
    <input type="number" id="Charmanderquantity" class="plushquantity" min="0" max="5"><br>

    <label id="PokemonPlushQuantity">Pokemon Plushes Bought:</label>
    <button type="button" id="PlushAll">CompletedPokemonPlushes</button>
</div>
<script src="EcommerceProject.js"></script>
</body>
</html>

以下是我目前编写的 JavaScript 代码：

var plushQuantity = 0;

document.getElementById("PlushAll").onclick = function(){
    var Bulbasaurvalue = document.getElementById("Bulbasaurquantity").value;
    Bulbavalue = Number(Bulbasaurvalue); 
    var Squirtlevalue = document.getElementById("Squirtlequantity").value;
    Squirvalue = Number(Squirtlevalue);  
    var Charmandervalue = document.getElementById("Charmanderquantity").value;
    Charvalue = Number(Charmandervalue); 
    PlushNumber = plushQuantity + Bulbavalue + Squirvalue + Charvalue; 
    console.log(`You are buying ${PlushNumber} Pokemon plushes.`); 
    updatePlushcount(); 
} 
function updatePlushcount(){
   document.getElementById("PokemonPlushQuantity").innerHTML =`You are purchasing ${PlushNumber} Pokemon plushes.`;
}

代码运行正常并在控制台中显示输出，但每次添加新的毛绒或其他玩具类别时都需要更新该功能。我还尝试添加复选框或单选按钮，以过滤到一个人想要购买的玩具，并使用功能将它们相加，但到目前为止我还没有成功。如果有人对改进我的示例网站有任何建议，我将不胜感激。

JavaScript HTML 函数输入 innerHTML

有没有办法循环遍历代码中的所有玩具以容纳更多玩具？

Is there a way to loop over all of the toys in my code to accomodate more toys?

评论