CODEWITHSUNDEEP
jquery
Jonathan Jake
Jonathan Jake

Reputation: 53

How to decrease the value of an variable?

I have an checkbox and an total value, I want the total value to decrease when checkbox is unchecked, and when its checked again it needs to go to the standard value.

When the checkbox is unchecked I want the total value to go -300, and when its checked again it removes the -300, so its back to normal. But my code doesn't work. It just doesn't do anything.

$('input').on('change', function() {
  if ($('#CalculatorPlacing').prop('checked') == false) {
    begin = begin - 300;
  }
});

var begin = 720;

$(document).ready(function() {
  $("#yett").val('Total €' + begin.toFixed(2).replace(/\./g, ','));

  $("#FenceCorners").on("change", function() {
    var prev = $("#yett").val();
    prev = prev.split('€')[1];

    var total = ($(this).find(":selected").data("price") * 100) / 100;
    total = parseInt(begin) + parseInt(total); //use begin
    // totals = parseInt(total);
    $("#yett").val('Total €' + total.toFixed(2).replace(/\./g, ','));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="SummaryRow">
  <h1><input type="yeets" name="_mdjm_event_cost" id="yett" class="mdjm-input-currency required" readonly="readonly" value="" placeholder="Totaal €0.00" style="
        height: 100px;
        width: 275px;
        margin-top: -40px;
        color: black;
        font-weight: bold;" />
  </h1>
</div>



<div class="switch">
  <input type="checkbox" name="iCalculatorPlacing" id="CalculatorPlacing" class="cmn-toggle cmn-toggle-round AutosubmitCalculator" value="1" tabindex="5">
  <label for="CalculatorPlacing" data-on="JA" data-off="NEE"></label>
</div>

Upvotes: 0

Views: 101

Answers (2)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

You need to cut down unnecessary lines from your code

Working snippet:-

$(document).ready(function() {
  var begin = 720;
  $("#yett").val('Total €' + begin.toFixed(2).replace(/\./g, ','));
  $("#CalculatorPlacing").on("change", function() {
    var prev = $("#yett").val().split('€')[1];
    if ($(this).prop('checked') == false) {
      total = begin - 300;
      $("#yett").val('Total €' + total.toFixed(2).replace(/\./g, ','));
    }else{
      $("#yett").val('Total €' + begin.toFixed(2).replace(/\./g, ','));
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="SummaryRow">
  <h1><input type="yeets" name="_mdjm_event_cost" id="yett" class="mdjm-input-currency required" readonly="readonly" value="" placeholder="Totaal €0.00" style="
        height: 100px;
        width: 275px;
        margin-top: -40px;
        color: black;
        font-weight: bold;" />
  </h1>
</div>



<div class="switch">
  <input type="checkbox" name="iCalculatorPlacing" id="CalculatorPlacing" class="cmn-toggle cmn-toggle-round AutosubmitCalculator" value="1" tabindex="5">
  <label for="CalculatorPlacing" data-on="JA" data-off="NEE"></label>
</div>

Upvotes: 1

mplungjan
mplungjan

Reputation: 178094

Several issues

Bit have a look at this I had to fiddle since you did not post the complete code

var begin = 720;

function toEur(num) {
  return 'Total €' + num.toFixed(2).replace(/\./g, ',')
}

function toNum(str) {
  return +(str.split("€")[1].replace(",", "."))
}

$(function() {

  $("#yett").val(toEur(begin));

  $("#FenceCorners").on("change", function() {
    var prev = $("#yett").val();
    prev = prev.split('€')[1]; //  ???  used?

    var total = ($(this).find(":selected").data("price") * 100) / 100;
    total = parseInt(begin) + parseInt(total); //use begin
    // totals = parseInt(total);
    $("#yett").val(toEuro(total));
  });

  $('#CalculatorPlacing').on('change', function() {
    $("#FenceCorners").change();
    $("#yett").val(
      toEur(
        toNum(
          $("#yett").val()
        ) + (this.checked ? -300 : 0)
      )
    )
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="SummaryRow">
  <h1><input type="yeets" name="_mdjm_event_cost" id="yett" class="mdjm-input-currency required" readonly="readonly" value="" placeholder="Totaal €0.00" style="
        height: 100px;
        width: 275px;
        margin-top: -40px;
        color: black;
        font-weight: bold;" />
  </h1>
</div>



<div class="switch">
  <input type="checkbox" name="iCalculatorPlacing" id="CalculatorPlacing" class="cmn-toggle cmn-toggle-round AutosubmitCalculator" value="1" tabindex="5">
  <label for="CalculatorPlacing" data-on="JA" data-off="NEE"></label>
</div>

Upvotes: 1

Related Questions