Как я могу суммировать свои варианты, как калькулятор?
Я делаю калькулятор меню, который показывает общее количество продуктов, но я застрял, потому что не знаю, с чего начать,
я думал использовать оператор if else и поместить несколько идентификаторов на каждую кнопку и каким-то образом вычислить общее количество, но я думаю, что это очень неэффективно, поэтому, если у кого-то есть идея получше, это было бы идеально
!! о, и кстати !! я создаю элементы кнопок с помощью create-element и appendchild .
вот мой код
////////////////////HTML////////////////////////////
<body>
<div class = "icons-container" id = "container">
</div>
<div class = "displayer">
<p>price</p>
<p>total</p>
</div>
</body>
</html>
/////////////////Javascript///////////////////////////
nombres = ['Kg','Taco','Dorado','1LtCSM','1/2CSM','Boing','Cafe','Refresco'];
precios = [440,30,24,50,25,20,20,25];
Total = [];
const element = document.querySelector('.icons-container');
for(i=0;i<=7;i++){
let div = document.createElement('div');
let h3 = document.createElement('h3');
div.classList.add('cuadro');
div.appendChild(h3);
h3.textContent = `${nombres[i]}`;
h3.classList.add('icon-text');
element.appendChild(div);
};
я ничего не пробовал, но я думал использовать if else и добавить разные идентификаторы на каждую кнопку, чтобы различать каждую,
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
используя массив объектов и цикл .forEach(), мы решаем все ваши проблемы более простым способом.
с этим решением нет необходимости добавлять class = "" или id = "" к каждой кнопке, потому что мы использовали простую концепцию под названием Closureshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures что заставляет .forEach() и .addEventListener() вместе работать здесь очень хорошо!
const menuData = [{
name: "Kg",
price: 440,
},
{
name: "Taco",
price: 30,
},
{
name: "Dorado",
price: 24,
},
{
name: "1LtCSM",
price: 50,
},
{
name: "1/2CSM",
price: 25,
},
{
name: "Boing",
price: 20,
},
{
name: "Cafe",
price: 20,
},
{
name: "Refresco",
price: 25,
},
];
generateGrid(menuData, document.querySelector(".icons-container"));
function generateGrid(menuData, parent) {
let total = 0;
menuData.forEach((menuItem) => {
const btn = document.createElement("button");
const h3 = document.createElement("h3");
btn.appendChild(h3);
parent.appendChild(btn);
h3.textContent = menuItem.name;
const priceEl = document.getElementById("price");
const totalEl = document.getElementById("total");
btn.addEventListener("click", () => {
total += menuItem.price;
priceEl.textContent = menuItem.price;
totalEl.textContent = total;
});
});
}/* use your own css here, this is just for demo purposes */
body,
.icons-container {
gap: 0.5rem;
}
.icons-container,
.displayer {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
.displayer>div {
text-align: center;
}
.displayer div>div {
font-size: 200%;
font-weight: bold;
}<div class = "icons-container">
<!-- JS will put the divs here -->
</div>
<div class = "displayer">
<div>
<p>price</p>
<div id = "price">0</div>
</div>
<div>
<p>total</p>
<div id = "total">0</div>
</div>
</div>@DanielSanchezIslas извините за поздний ответ (в эти дни я был занят), да, я использовал простой видеомагнитофон под названием «OBS STUDIO» и отредактировал его онлайн с помощью «EZGIF» только для сжатия, поэтому GIF займет менее 2 МБ, поэтому я могу добавить это в ответ. ничего сумасшедшего, никакого Figma, только HTML CSS и запись видео.
чувак, это потрясающе, цикл forEach и замыкания никогда не приходили мне в голову, я не использовал это, но работает отлично, спасибо, и как ты сделал этот пример gif, ты использовал фигму или что?