SUM calculate with jQuery doesn’t show the total amount

Question

I have a function with jQuery that should SUM up all numbers in divs with class .priceSelectedOption (see Javascript function that add these classes to the last div of outputted values after selection dropdown), but it doesn’t show the total amount below title “Total”. Only 0.

function selectedAfternoon(element) {
    var text = element.options[element.selectedIndex].value;
    document.getElementById("output-selected-option-afternoon").innerHTML = "<div>" + text.split("|").join("</div><div>") + "</div>";
    document.getElementById("output-selected-option-afternoon").querySelector("div:last-child").classList.add("priceSelectedOption")
}

function selectedCommute(element) {
    var text = element.options[element.selectedIndex].value;
    document.getElementById("output-selected-option-commute").innerHTML = "<div>" + text.split("|").join("</div><div>") + "</div>";
    document.getElementById("output-selected-option-commute").querySelector("div:last-child").classList.add("priceSelectedOption")
}

$(document).ready(function(){
    var total = 0;
    $('.priceSelectedOption').each(function(){
        total += parseFloat($(this).text().replace(/,/g,''))
    })
    $('.totalPrice').text(total)
})

.js-basic-single {
  width: 100%;
}

#output-selections {
  display: flex;
  flex-direction: column;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

.selected-option {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.priceSelectedOption::before, .totalPrice::before {
    content: '€ ';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="Namiddag" name="Namiddag" data-name="Namiddag" class="js-basic-single" onChange="selectedAfternoon(this);">
  <option></option>
  <option id="13x19namiddag" value="Namiddag|13x19 cm|12,50">13x19 cm, €12.50</option>
  <option id="20x30namiddag" value="Namiddag|20x30 cm|22,50">20x30 cm, €22.50</option>
  <option id="30x45namiddag" value="Namiddag|30x45 cm|32,50">30x45 cm, €32.50</option>
    <option class="disabled" value="disabled" disabled="disabled">Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., &nbsp;</option>
</select>

<select id="Onderweg" name="Onderweg" data-name="Onderweg" class="js-basic-single" onChange="selectedCommute(this);">
  <option></option>
  <option id="13x19onderweg" value="Onderweg|13x19 cm|12,50">13x19 cm, €12.50</option>
  <option id="20x30onderweg" value="Onderweg|20x30 cm|22,50">20x30 cm, €22.50</option>
  <option id="30x45onderweg" value="Onderweg|30x45 cm|32,50">30x45 cm, €32.50</option>
    <option class="disabled" value="disabled" disabled="disabled">Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., &nbsp;</option>
</select>

<div id="output-selections">
<div class="selected-option" id="output-selected-option-afternoon"></div>
<div class="selected-option" id="output-selected-option-commute"></div>
</div>

<h3>Total</h3>
<div class="totalPrice"></div>

You are setting total on ready when total is 0 but after that, you are not setting it again — Rajesh, Aug 25 '22 at 03:23

score 1 · Accepted Answer · answered Aug 25 '22 at 03:32

As commented:

You are setting total on ready when total is 0 but after that, you are not setting it again

$(document).ready() is called on load when the page is loaded and is ready for interactions. This function is used to do initialisations like setting variables, adding event handlers, getting dynamic data etc.

So you will have to invoke your calculations on change of dropdown as well.

Also, its not a good idea to have listeners on HTML. That exposes your code to everyone. Its always better to use .addEventListener

Updated Code:

function selectedAfternoon(element) {
  var text = element.options[element.selectedIndex].value;
  document.getElementById("output-selected-option-afternoon").innerHTML = "<div>" + text.split("|").join("</div><div>") + "</div>";
  document.getElementById("output-selected-option-afternoon").querySelector("div:last-child").classList.add("priceSelectedOption")
  computeTotal()
}

function selectedCommute(element) {
  var text = element.options[element.selectedIndex].value;
  document.getElementById("output-selected-option-commute").innerHTML = "<div>" + text.split("|").join("</div><div>") + "</div>";
  document.getElementById("output-selected-option-commute").querySelector("div:last-child").classList.add("priceSelectedOption")
  computeTotal()
}

function computeTotal() {
 var total = 0;
  $('.priceSelectedOption').each(function() {
    total += parseFloat($(this).text().replace(/,/g, ''))
  })
  $('.totalPrice').text(total)
}

$(document).ready(function() {
  document
    .getElementById('Onderweg')
    .addEventListener('change', function() { selectedCommute(this) })

  document
    .getElementById('Namiddag')
    .addEventListener('change', function() { selectedAfternoon(this) })

  computeTotal()
})

.js-basic-single {
  width: 100%;
}

#output-selections {
  display: flex;
  flex-direction: column;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

.selected-option {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.priceSelectedOption::before,
.totalPrice::before {
  content: '€ ';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="Namiddag" name="Namiddag" data-name="Namiddag" class="js-basic-single">
  <option></option>
  <option id="13x19namiddag" value="Namiddag|13x19 cm|12,50">13x19 cm, €12.50</option>
  <option id="20x30namiddag" value="Namiddag|20x30 cm|22,50">20x30 cm, €22.50</option>
  <option id="30x45namiddag" value="Namiddag|30x45 cm|32,50">30x45 cm, €32.50</option>
  <option class="disabled" value="disabled" disabled="disabled">Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., &nbsp;</option>
</select>

<select id="Onderweg" name="Onderweg" data-name="Onderweg" class="js-basic-single">
  <option></option>
  <option id="13x19onderweg" value="Onderweg|13x19 cm|12,50">13x19 cm, €12.50</option>
  <option id="20x30onderweg" value="Onderweg|20x30 cm|22,50">20x30 cm, €22.50</option>
  <option id="30x45onderweg" value="Onderweg|30x45 cm|32,50">30x45 cm, €32.50</option>
  <option class="disabled" value="disabled" disabled="disabled">Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., &nbsp;</option>
</select>

<div id="output-selections">
  <div class="selected-option" id="output-selected-option-afternoon"></div>
  <div class="selected-option" id="output-selected-option-commute"></div>
</div>

<h3>Total</h3>
<div class="totalPrice"></div>

References:

Why are inline event handler attributes a bad idea in modern semantic HTML?

Hey Rajesh, thanks! That looks and works really great. Do you have solution for my second question as well? Also the outputted price is without a comma but that’s a fault in my original code which I should look a new solution for. I was also wondering, if you could check out my webpage where I implemented your code. As it seems the Javascript is not fired at all out there and I can’t find out why because I see no script error. Would you mind sharing your email with me so I can send the link, or I will add it here perhaps? Thank you once again. Hope to hear from you. Best, Silvan — Silvan Soeters, Aug 25 '22 at 07:43
Hey, regarding your second question, every select of 16 will have a change function. So you can add a class to hide and on change of any condition, you can remove the class to make it visible. Regarding your site, my suggestion is to not share here. Making a debug version public can have issues. For why its not firing, check if the code is available, if the selectors are correct. — Rajesh, Aug 26 '22 at 03:46
Hey Rajesh, thanks. I will do some googling how to actually do that (the second question). And I understand. I actually just got it to work. It seemed Webflow, which is what my website made with, changed the capitals of some classes to lowercase..). But I found out another issue, in your code as well, when selecting and deselecting the dropdowns, the Euro€ sign stays visible and the calculation goes to “Nan”. See image: https://drive.google.com/file/d/1kwp8YSuI_bSwnX4gaJyubVXuyFmXNyuc/view?usp=drivesdk or Loom: https://www.loom.com/share/db1f2b185f884733802c6d36dc10bdba Any fix for that?.. — Silvan Soeters, Aug 26 '22 at 07:12
Oh and also, I had to change back my onchange event to -in- HTML.. for some reason it doesn’t seem to fire when having it in Javascript. — Silvan Soeters, Aug 26 '22 at 07:16

SUM calculate with jQuery doesn’t show the total amount

1 Answers1

References: