Javascript - how to add a number to a summed number

boufier
December 30, 2023
49 views
2 votes
3 Answers

I would like to add the products and total them. 99.99 should be added to the total amount.

what options are there?

$(document).ready(function() {
  $('#btn-add').click(function() {
    $('#select-from option:selected').each(function() {
      $('#select-to').append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
      $("input[name='class']").val((parseFloat($(this).val()) + parseFloat($("input[name='class']").val())).toFixed(2));
    });
  });
  $('#btn-remove').click(function() {
    $('#select-to option:selected').each(function() {
      $('#select-from').append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
      $(this).remove();
      $("input[name='class']").val(parseFloat($("input[name='class']").val() - parseFloat($(this).val())).toFixed(2));
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectfrom" id="select-from" multiple="" size="5">
  <option value="0.00">--</option>
  <option value="22.99">Product S</option>
  <option value="27.99">Product S Boost</option>
  <option value="32.99">Product S Boost</option>
  <option value="37.99">Product M</option>
  <option value="42.99">Product M Boost</option>
  <option value="47.99">Product L</option>
  <option value="62.99">Product XL</option>
</select>

<a href="JavaScript:void(0);" id="btn-add">Add »</a>
<a href="JavaScript:void(0);" id="btn-remove">« Remove</a>

<select name="selectto" id="select-to" multiple="" size="5"></select> 
<input type="text" name="class" value="0">
<div type="text" id="classx">Here the total number including €99.99 should be calculated</div>

Tags: javascript sum

Answers

Chosen as BEST ANSWER



$(() => {
  const $totalField = $('#total');
  const calcTotal = () => {
let total = $('#select-to option')
  .map((i, el) => +el.value)
  .get()
  .reduce((a, b) => a + b, 0)
return total > 0 ? total + 99 : total;
  };
  $('.btn').on('click', (e) => {
e.preventDefault();
const tgt = e.target.closest('.btn');
if (!tgt) return; // not a button
if (tgt.matches('.add'))
  $('#select-from option:selected').clone().appendTo('#select-to');
else $('#select-to option:selected').remove();
$totalField.val(calcTotal().toFixed(2));
  });
});
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    function img(x) {
        if (x == 0) {
            document.getElementById('img4').style.display = 'none';
            document.getElementById('img3').style.display = 'none';
          document.getElementById('img2').style.display = 'none';
          document.getElementById('img1').style.display = 'block';
        } else if (x == 2){
          document.getElementById('img1').style.display = 'none';
          document.getElementById('img2').style.display = 'block';
          document.getElementById('img3').style.display = 'none';
          document.getElementById('img4').style.display = 'none';
        

        }else if (x == 3){
          document.getElementById('img1').style.display = 'none';
          document.getElementById('img2').style.display = 'none';
          document.getElementById('img3').style.display = 'block';
          document.getElementById('img4').style.display = 'none';
        }else {
          document.getElementById('img1').style.display = 'none';
          document.getElementById('img2').style.display = 'none';
          document.getElementById('img3').style.display = 'none';
          document.getElementById('img4').style.display = 'block';
        }
      }
    </script>

<div>typ</div>
<input type="radio" name="img" onclick="img(0)" checked="">
Neukunden
   <input type="radio" name="img" onclick="img(2)">
Bestandskunden
<input type="radio" name="img" onclick="img(3)">
Junge Leute
<input type="radio" name="img" onclick="img(4)">
Selbständig
<div id="img1" style="display: block;">
<select name="selectfrom" id="select-from" multiple="" size="5">
<option value="22.99">Product S</option>
<option value="27.99">Product S Boost</option>
<option value="32.99">Product M</option>
<option value="37.99">Product M Boost</option>
<option value="42.99">Product L</option>
<option value="47.99">Product L Boost</option>
<option value="62.99">Product XL</option>

</select>
</div>

<div id="img2" style="display: none;">
<select name="selectfrom" id="select-from" multiple="" size="5">
<option value="12.99">Product S YP</option>
<option value="12.99">Product S Boost YP</option>
<option value="22.99">Product M YP</option>
<option value="22.99">Product M Boost YP</option>
<option value="32.99">Product L YP</option>
<option value="32.99">Product L Boost YP</option>
<option value="52.99">Product XL YP</option>

</select>
</div>
<div id="img3" style="display: none;">
<select name="selectfrom" id="select-from" multiple="" size="5">
<option value="11.49">Product S KB</option>
<option value="13.99">Product S Boost KB</option>
<option value="16.49">Product M KB</option>
<option value="18.99">Product M Boost KB</option>
<option value="21.49">Product L KB</option>
<option value="23.99">Product L Boost KB</option>
<option value="31.49">Product XL KB</option>

</select>
</div>
<div id="img4" style="display: none;">
<select name="selectfrom" id="select-from" multiple="" size="5">
<option value="20.69">Product S SoHo</option>
<option value="25.19">Product S Boost SoHo</option>
<option value="29.69">Product M SoHo</option>
<option value="34.19">Product M Boost SoHo</option>
<option value="38.69">Product L SoHo</option>
<option value="43.19">Product L Boost SoHo</option>
<option value="56.69">Product XL SoHo</option>

</select>
</div>

<a href="#" class="btn add">Add »</a>
<a href="#" class="btn remove">« Remove</a>

<select name="selectto" id="select-to" multiple="" size="5"></select>

<input type="text" name="class" value="0" id="total">

(Edit)

If I’ve understood what you’re asking, you want to add 99 to the summed value. As such, you could simply perform this mathematical operation on the sum before you update the input.

However, there’s a few things you can do to make the code more succinct and take advantage of jQuery.

Firstly, you don’t need to add the option elements back in to select-from when removing items. This duplicates them.

Secondly, you can just clone() elements instead of hacking together HTML strings and appending that content. This avoids the need for the explicit each() loop.

Lastly, you can use reduce() to sum the selected options and update the input once, outside of the loop.

Here’s a working example with the above changes, and DRY’d up slightly:

jQuery($ => {
  const $totalField = $('#total');
  const calcTotal = () => {
    let total = [...document.querySelectorAll('#select-to option')].reduce((s, el) => s + parseFloat(el.value), 0);
    return total > 0 ? total + 99 : total;
  }

  $('#btn-add').click(e => {
    e.preventDefault();
    $('#select-from option:selected').clone().appendTo('#select-to');
    $totalField.val(calcTotal().toFixed(2));
  });

  $('#btn-remove').click(e => {
    e.preventDefault();
    $('#select-to option:selected').remove();
    $totalField.val(calcTotal().toFixed(2));
  });
});

select {
  min-width: 150px;
  min-height: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<select name="selectfrom" id="select-from" multiple="" size="5">
  <option value="22.99">Product S</option>
  <option value="27.99">Product S Boost</option>
  <option value="32.99">Product S Boost</option>
  <option value="37.99">Product M</option>
  <option value="42.99">Product M Boost</option>
  <option value="47.99">Product L</option>
  <option value="62.99">Product XL</option>
</select>

<a href="#" id="btn-add">Add »</a>
<a href="#" id="btn-remove">« Remove</a>

<select name="selectto" id="select-to" multiple="" size="5"></select>

<input type="text" name="class" value="0" id="total" value="0.00" />

Also, as an aside, note that you’re using a very old version of jQuery. The latest version at the time of this question is v3.7.1. I would strongly suggest you update.

DRYed up further

$(() => {
  const $totalField = $('#total');
  const calcTotal = () => {
    let total = $('#select-to option')
      .map((i, el) => +el.value)
      .get()
      .reduce((a, b) => a + b, 0)
    return total > 0 ? total + 99 : total;
  };
  $('.btn').on('click', (e) => {
    e.preventDefault();
    const tgt = e.target.closest('.btn');
    if (!tgt) return; // not a button
    if (tgt.matches('.add'))
      $('#select-from option:selected').clone().appendTo('#select-to');
    else $('#select-to option:selected').remove();
    $totalField.val(calcTotal().toFixed(2));
  });
});

select {
  min-width: 150px;
  min-height: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<select name="selectfrom" id="select-from" multiple="" size="5">
  <option value="22.99">Product S</option>
  <option value="27.99">Product S Boost</option>
  <option value="32.99">Product S Boost</option>
  <option value="37.99">Product M</option>
  <option value="42.99">Product M Boost</option>
  <option value="47.99">Product L</option>
  <option value="62.99">Product XL</option>
</select>

<a href="#" class="btn add">Add »</a>
<a href="#" class="btn remove">« Remove</a>

<select name="selectto" id="select-to" multiple="" size="5"></select>

<input type="text" name="class" value="0" id="total" value="0.00" />

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – how to add a number to a summed number

Answers