hello I have a list of articles with different categories
for example the category aaa or the bbb category, and the category ccc
I wish I could display the sum of the data-prices for each category
for example for the aaa category I should have 3.20
for category bbb 10.20
and for the ccc category 11.20
<a style="cursor: pointer; " data-prix="2.10"data-qte="1" data-categorie="aaa"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="1.10"data-qte="1" data-categorie="aaa"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="3.10"data-qte="1" data-categorie="bbb"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="4.10"data-qte="1" data-categorie=""onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);"> ajouter au panier</a>
<a style="cursor: pointer; " data-prix="5.10"data-qte="1" data-categorie="ccc"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="6.10"data-qte="1" data-categorie="ccc"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="7.10"data-qte="1" data-categorie="bbb"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<script>
const nombrearticle = 7;
for (let i = 0; i < nombrearticle; i ) {
if (data-categorie=== aaa) {
totalquantiteaaa = Number(data-prix) ;
} else if (data-categorie=== bbb) {
totalquantitebbb = Number(data-prix) ;
}
else if (data-categorie=== ccc) {
totalquantiteccc = Number(data-prix) ;
}
}
</script>
CodePudding user response：
It is not clear what part you are missing, and normally the thing to do would be to wait until you can be more specific.
I have time to kill, so I mocked up your problem. I believe that I have covered most likely issues: https://jsfiddle.net/eqr9jb5v/
details: we need a total of prices. If that data is already in the javascript somewhere, use that instead, otherwise, we can gather it:
const categories = document.querySelectorAll('a[data-categorie]')
const totals = {}
for (let categorie of categories) {
if(!(categorie.dataset.categorie in totals)) totals[categorie.dataset.categorie] = 0
totals[categorie.dataset.categorie] = Number(categorie.dataset.prix)
}
it could be that instead your problem is really answering "how do I display this data to the user?". There are many ways to do it, but here is a pure javascript way:
we will create a mojunt point to display categories:
<div slot="categories"> </div>
and we will create a template so each categorie's price total can be displayed consistently:
<template id="categorie">
<section>
<header><h2>categorie - {categorie}</h2></header>
<p>total {sum}</p>
<section>
</template>
Now we can iterate over our categories, and apply each to our template, then mount it to our mount point:
Object.keys(totals).forEach(categorie => {
mountTotal({ categorie, sum: totals[categorie]})
})
function mountTotal({categorie,sum}) {
const fragment = template.content.cloneNode(true)
const node = document.importNode(fragment, true)
const title = node.querySelector('h2')
title.innerText = title.innerText.replace(/\{categorie\}/, categorie)
const content = node.querySelector('p')
content.innerText = content.innerText.replace(/\{sum\}/, sum)
mountPoint.appendChild(node)
}
CodePudding user response：
There are many mistakes in your code. The first issue is that while comparing the aaa should be in double quotes. Also, you cannot get the properties of an "a" tag the way you are trying to get it.
Also, you are taking noofarticle as 7. Is it fixed for you? What if more element comes in?
Please look at my solution below.
<a style="cursor: pointer; " data-prix="2.10"data-qte="1" data-categorie="aaa"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="1.10"data-qte="1" data-categorie="aaa"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="3.10"data-qte="1" data-categorie="bbb"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="4.10"data-qte="1" data-categorie=""onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);"> ajouter au panier</a>
<a style="cursor: pointer; " data-prix="5.10"data-qte="1" data-categorie="ccc"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="6.10"data-qte="1" data-categorie="ccc"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<a style="cursor: pointer; " data-prix="7.10"data-qte="1" data-categorie="bbb"onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);">ajouter au panier</a>
<script>
// Get all the a tags
const a_tag = document.getElementsByTagName('a');
// you can further provide class to those a tags if you have other a tags as well
// const a_tag = document.getElementsByClassName('a-class');
// a-class is nothing but a simple css class.This will narrow down the elements to only the ones containing the class.
// Or you can use a query selector
let aaa = 0;
let bbb = 0;
let ccc = 0;
for (let index = 0; index < a_tag.length; index ) {
const element = a_tag[index];
let categorie = element.getAttribute('data-categorie');
if(categorie === 'aaa') {
aaa = Number(element.getAttribute('data-prix'));
}
if(categorie === 'bbb') {
bbb = Number(element.getAttribute('data-prix'));
}
if(categorie === 'ccc') {
ccc = Number(element.getAttribute('data-prix'));
}
}
console.log(aaa, bbb, ccc);
</script>
Running this code directly in a html file should give you your desired output. Hope this solves your issue.
Please upvote if this helps.
Thanks