Prevent Custom Event from Executing After Another Function

I have a table inside a form that I’m using to make payments on invoices. On each table row there is a checkbox and a text input. When the user clicks the checkbox, it populates the text input with the invoice balance.

In some instances, a user will click the checkbox and populate the text input as noted above. However, the user may then decide that they do not want to pay the full balance on that invoice. So, they can change the value of the text input to any amount less than the balance. When a user does this, the checkbox is unchecked.

When the checkbox is unchecked, the “ifUnchecked” event fires. The problem is, the “ifUnchecked” event clears the text input. So, in practice, this means that when the user manually enters a value into the text input, the checkbox is unchecked, but the value is also cleared – a ux issue.

Question
How do I prevent the ifunchecked event from firing in this case, or is there a better approach?

$(function() {
  var payFull = $('input[type="checkbox"].payfull');
  var payNow = $('input[type="text"].paynow');
  var payAmt = $('#amounttopay');

  // Recalc Function
  function reCalc() {
      var sum = 0;
      payNow.each(function() {
        sum += Number($(this).val());
      });
      if (!isNaN(sum) && sum.length !== 0) {
        payAmt.html('$' + sum.toFixed(2));
      } else {
        payAmt.html('$0.00');
      }
    }
    // When Pay in Full Checkbox is Checked fill in Pay This Time Field with Invoice Amount Due Value
  payFull.on('ifChecked', function(event) {
    var val = $(this).val().replace('$', '');
    var price = $(this).closest('tr').find('input[type="text"]').val(val);
    price;
    reCalc;
  });

  // If Pay in Full Unchecked then remove value from respective Pay This Time Input
  payFull.on('ifUnchecked', function(event) {
    var removePrice = $(this).closest('tr').find(payNow).val('');
    removePrice;
    reCalc;
  });

  // If Pay This Time changes recalculate total
  var payFullVal = payFull.val().replace('$', '');
  var payNowVal = payNow.val();
  payNow.keyup(function() {
    reCalc;
    if (payFullVal !== payNowVal) {
      $(this).closest('tr').find('input').iCheck('uncheck');
    } else {}
  });
});

read more

How to make nested divs resize based on user input

I am doing a project from The Odin Project. Basically this.

Here is the code:

HTML

<!DOCTYPE html>

<html>

<head>
    <script src="js/jQuery.js"></script>
    <link type="text/css" rel="stylesheet" href="css/sketch.css">
    <script src="js/sketch.js"></script>
</head>

<body>
<div class="grid_controls">
    <button class="clear">Clear</button>
</div>
<div class="container">
</div>
</body>

</html>

CSS

/*=================
General
=================*/

body {
    background: aqua;
}

/*=================
Sketchpad Holder
=================*/
.container {
    width: 500px;
    height: 400px;
    background-color: orange;
    overflow: hidden;
    margin: auto;
    position: relative;
    top: 20px;
}

.box {
    width: 16px;
    height: 16px;
    background: yellow;
    display: inline-block;
    margin: 1px 1px 1px 1px;
    left: 0.5%;
    right: auto;
    position: relative;
}


.clear {
    position: relative;
    margin: auto;
    text-align: center;
}

read more

result list of map is one longer

in this Haskell example the result is sometimes one longer than the base list. Any clue for this?

Prelude> let x3 = [1,3..10] Prelude> x3 [1,3,5,7,9] Prelude> length x3 5 Prelude> length $ map (+1) x3 5 Prelude> length $ map (*3) x3 5 Prelude> length $ map (/2) x3 6 Prelude> length $ map (/1) x3 6 Prelude> length $ map (`div`1) x3 5 Prelude> map log x3 [0.0,1.0986122886681098,1.6094379124341003 ,1.9459101490553132,2.1972245773362196,2.3978952727983707] Prelude> length it 6

result list of map is one longer