How to add numbers following a condition in JavaScript

Question

I have a list of articles with different categories (ex: aaa, bbb, ccc). I want to display the sum of the data-prices for each category

For example, I should have 3.20 for aaa, 10.20 for bbb, and 11.20 for ccc

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);
  }
}

<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>

When you tried to write this code yourself, how far did you get? Where did you get stuck? If you share your code we can help you with your problem(s), and we may be able to help you understand any mistakes or misunderstandings. Please, read the "How to Ask" and "minimal reproducible example" guidelines. Incidentally, if the data-qte and onclick attributes aren't relevant to this specific problem, could you edit those out, just to minimise the code we're reading and parsing? — David Thomas
– David Thomas, Commented Jan 27, 2023 at 17:17
where totalquantiteaaa, totalquantitebbb and totalquantiteccc defined? Also, i would change if statement to switch just easier to read code, also looks like you are doing decimals, i would use parse float and then format to fixed — Nonik
– Nonik, Commented Jan 27, 2023 at 17:33
What should happen with the <a> that doesn't have an attribute-value for data-categorie? Also, please could you remove the attributes that don't appear to be relevant (the style, onclick and data-qte)? If those attributes are all relevant to this, specific problem please could you explain how, and why? — David Thomas
– David Thomas, Commented Jan 27, 2023 at 17:35
You're comparing ` if (data-categorie=== aaa) {, but haven't defined aaa; should it be a string? if (data-categorie=== "aaa") {`? — mykaf
– mykaf, Commented Jan 27, 2023 at 17:42

roberto tomás · Accepted Answer · 2023-01-27 18:17:32Z

1

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">&nbsp;</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)
}

answered Jan 27, 2023 at 18:17

roberto tomás

4,7477 gold badges47 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

phil1 Over a year ago

A very big roof thank you, it works perfectly I do not speak English, so I am helped by a translator But I'll try to explain what I wanted to do so I have an order form with a php file and a javascript file that processes the form data when the customer places an order When the customer on add the onclick is triggered to display an add to cart message and the rest of the information is transferred to the javascript file Your solution works perfectly once again congratulations for the explanation and the help

halfer · Accepted Answer · 2023-02-04 12:01:44Z

0

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.

edited Feb 4, 2023 at 12:01

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jan 27, 2023 at 18:51

Shabbir

1538 bronze badges

3 Comments

phil1 Over a year ago

Hello a very very big thank you I understand your code better, thank you very much

phil1 Over a year ago

Another small question to finish how can I put the value of AAA in a data-price please

phil1 Over a year ago

I ended up finding with document.getElementById a huge thank you to all of you

Collectives™ on Stack Overflow

How to add numbers following a condition in JavaScript

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related