Kevin Powell - Community•11mo ago

discount calculator

I realise a discount calculator who should show on the bottom : first: the name of the product second: the price and the discount this is my work : https://codepen.io/alpha_66/pen/oNVwgOG?editors=1010 but somthing is going wrong can I get some idea about what is going wrong ? thanks by advance

Patrick L

CodePen

oNVwgOG

...

25 Replies

MarkBoots•11mo ago

you are trying to have an evenlistener on the select options. to get the value of the selected option, you can add the change evenlistener to the select itself example

 <select name="nom" id="level">
    <option value="0">--- Selection ---</option>
    <option value="5">Lv1:5% discount</option>
    <option value="10">Lv1:10% discount</option>
    <option value="15">Lv1:15% discount</option>
</select>

 <select name="nom" id="level">
    <option value="0">--- Selection ---</option>
    <option value="5">Lv1:5% discount</option>
    <option value="10">Lv1:10% discount</option>
    <option value="15">Lv1:15% discount</option>
</select>

const level = document.querySelector("#level");
level.addEventListener("change", ()=>{
  const discountPercentage = parseInt(level.value);
  console.log(discountPercentage); // 0 | 5 | 10 | 15
})

const level = document.querySelector("#level");
level.addEventListener("change", ()=>{
  const discountPercentage = parseInt(level.value);
  console.log(discountPercentage); // 0 | 5 | 10 | 15
})

Pat66OP•11mo ago

Hi everybody thanks for your message a change my code

Pat66OP•11mo ago

https://codepen.io/alpha_66/pen/oNVwgOG?editors=1100

Patrick L

CodePen

oNVwgOG

...

Pat66OP•11mo ago

but something is still going wrong what I write in filed don t appear on the bottom can I get some idea about what is going wrong thanks

Jochem•11mo ago

you only have an event listener on the level dropdown, so it only updates when you change the level

Pat66OP•11mo ago

thanks I want get two number after "," but I have zero my code

 level.addEventListener("change", ()=>{
    let nomProduit=0;
    let prixProduit=0;
    nomProduit=produit.value;
    prixProduit=parseInt(montant.value);
    const pourcentage=parseInt(level.value);
    remise=Math.round(pourcentage /prixProduit * 100) /100;
    article.innerHTML=nomProduit;
    prix.innerHTML=prixProduit;
    discount.innerHTML=remise;

    return remise;
  })

 level.addEventListener("change", ()=>{
    let nomProduit=0;
    let prixProduit=0;
    nomProduit=produit.value;
    prixProduit=parseInt(montant.value);
    const pourcentage=parseInt(level.value);
    remise=Math.round(pourcentage /prixProduit * 100) /100;
    article.innerHTML=nomProduit;
    prix.innerHTML=prixProduit;
    discount.innerHTML=remise;

    return remise;
  })

Jochem•11mo ago

you can use Number.toLocaleString() in combination with the options and Intl.NumberFormat() Constructor syntax to get a locale formatted currency string:

let remise=Math.round(pourcentage /prixProduit * 100) /100;
remise = remise.toLocaleString('fr-FR', {
  style: 'currency',
  currency: 'EUR'
});

let remise=Math.round(pourcentage /prixProduit * 100) /100;
remise = remise.toLocaleString('fr-FR', {
  style: 'currency',
  currency: 'EUR'
});

or just set it to two digits:

let remise=Math.round(pourcentage /prixProduit * 100) /100;
remise = remise.toLocaleString('fr-FR', {
  minimumFractionDigits: 2
});

let remise=Math.round(pourcentage /prixProduit * 100) /100;
remise = remise.toLocaleString('fr-FR', {
  minimumFractionDigits: 2
});

the first one will follow all the rules for displaying currency in French. It adds the € at the end, and will handle negative numbers gracefully. And if you change the locale to en-US, it'll change to using a period decimal separator and put the € at the start.

Pat66OP•11mo ago

thanks you please I have an message

Pat66OP•11mo ago

Pat66OP•11mo ago

I don t understand the code is

const level=document.querySelector('#level');
const first=document.querySelector('#level').options[1].value;
const two=document.querySelector('#level').options[2].value;
const three=document.querySelector('#level').options[3].value;
level.addEventListener("change", ()=>{
    let nomProduit=0;
    let prixProduit=0;
    nomProduit=produit.value;
    prixProduit=parseInt(montant.value);
    const pourcentage=parseInt(level.value);
    remise=Math.round(pourcentage /prixProduit * 100) /100;
    article.innerHTML=nomProduit;
    prix.innerHTML=prixProduit;
    discount.innerHTML=remise;

    return remise;
  })

first.addEventListener("change", ()=>{
  let nomProduit=0;
  let prixProduit=0;
  nomProduit=produit.value;
  prixProduit=parseInt(montant.value);
  const pourcentage=parseInt(level.value);
  remise=Math.round(pourcentage /prixProduit * 100) /100 ;
  article.innerHTML=nomProduit;
  prix.innerHTML=prixProduit;
  discount.innerHTML=remise;

  return remise;
})

const level=document.querySelector('#level');
const first=document.querySelector('#level').options[1].value;
const two=document.querySelector('#level').options[2].value;
const three=document.querySelector('#level').options[3].value;
level.addEventListener("change", ()=>{
    let nomProduit=0;
    let prixProduit=0;
    nomProduit=produit.value;
    prixProduit=parseInt(montant.value);
    const pourcentage=parseInt(level.value);
    remise=Math.round(pourcentage /prixProduit * 100) /100;
    article.innerHTML=nomProduit;
    prix.innerHTML=prixProduit;
    discount.innerHTML=remise;

    return remise;
  })

first.addEventListener("change", ()=>{
  let nomProduit=0;
  let prixProduit=0;
  nomProduit=produit.value;
  prixProduit=parseInt(montant.value);
  const pourcentage=parseInt(level.value);
  remise=Math.round(pourcentage /prixProduit * 100) /100 ;
  article.innerHTML=nomProduit;
  prix.innerHTML=prixProduit;
  discount.innerHTML=remise;

  return remise;
})

Jochem•11mo ago

you're setting first to the value of the first option in the dropdown, which is a string. Strings can't have eventlisteners, those can only go on html elements

MarkBoots•11mo ago

you dont need the evenlisteners on the options if you have it on the select. forget about first,two,three. you don't need them. level.value is already the selected option

MarkBoots•11mo ago

also, in this case it would be easier to use a form element, so you only have to listen to a change on that instead of all fields here a very simple example of your project https://codepen.io/MarkBoots/pen/gOERXvr?editors=1011

Mark Boots

CodePen

gOERXvr

...

Pat66OP•11mo ago

Thanks a lot for every answers I have a question when I wrote this :

level.addEventListener("change", ()=>{
    let nomProduit=0;
    let prixProduit=0;
    nomProduit=produit.value;
    prixProduit=parseInt(montant.value);
    const pourcentage=parseInt(level.value);
    remise=pourcentage /prixProduit * 100 /100;

    return remise;
    article.innerHTML=nomProduit; //don't work
    prix.innerHTML=prixProduit;  //don't work
    discount.innerHTML=remise;  //don't work
    
   })

level.addEventListener("change", ()=>{
    let nomProduit=0;
    let prixProduit=0;
    nomProduit=produit.value;
    prixProduit=parseInt(montant.value);
    const pourcentage=parseInt(level.value);
    remise=pourcentage /prixProduit * 100 /100;

    return remise;
    article.innerHTML=nomProduit; //don't work
    prix.innerHTML=prixProduit;  //don't work
    discount.innerHTML=remise;  //don't work
    
   })

Jochem•11mo ago

code doesn't run after return

Pat66OP•11mo ago

but when I wtitte this :

level.addEventListener("change", ()=>{
    let nomProduit=0;
    let prixProduit=0;
    nomProduit=produit.value;
    prixProduit=parseInt(montant.value);
    const pourcentage=parseInt(level.value);
    remise=pourcentage /prixProduit * 100 /100;
 article.innerHTML=nomProduit;
    prix.innerHTML=prixProduit;
    discount.innerHTML=remise;
    return remise;
   })

level.addEventListener("change", ()=>{
    let nomProduit=0;
    let prixProduit=0;
    nomProduit=produit.value;
    prixProduit=parseInt(montant.value);
    const pourcentage=parseInt(level.value);
    remise=pourcentage /prixProduit * 100 /100;
 article.innerHTML=nomProduit;
    prix.innerHTML=prixProduit;
    discount.innerHTML=remise;
    return remise;
   })

is working fine

Jochem•11mo ago

when you use return, the value you pass it is returned and the function stops executing immediately

Pat66OP•11mo ago

Jochem•11mo ago

some editors and setups will actually gray out the code after a return statement, and warn about unreachable code

Pat66OP•11mo ago

another question when I used .fixed(); he don t work

level.addEventListener("change", ()=>{
    let nomProduit=0;
    let prixProduit=0;
    nomProduit=produit.value;
    prixProduit=parseInt(montant.value);
    const pourcentage=parseInt(level.value);
    remise=pourcentage /prixProduit * 100 /100;
    article.innerHTML=nomProduit;
    prix.innerHTML=prixProduit;
    discount.innerHTML=remise;     
    return remise.toFixed(1);

level.addEventListener("change", ()=>{
    let nomProduit=0;
    let prixProduit=0;
    nomProduit=produit.value;
    prixProduit=parseInt(montant.value);
    const pourcentage=parseInt(level.value);
    remise=pourcentage /prixProduit * 100 /100;
    article.innerHTML=nomProduit;
    prix.innerHTML=prixProduit;
    discount.innerHTML=remise;     
    return remise.toFixed(1);

Pat66OP•11mo ago

Jochem•11mo ago

not sure tbh, that should work (and set it to 1 decimal place)

MarkBoots•11mo ago

there is nothing to return to. this is just an evenlistener's callback. what do you want to do with remise? I think you want to do discount.innerHTML=remise.toFixed(1) and no return

Jochem•11mo ago

that is a good point

Pat66OP•11mo ago

thanks a lot guys

Gaming

Programming

discount calculator