<?php
echo'
  <form>
    <input type="text" id="falk_id" name="falk"   value="" maxlength="4"/>
    <input type="text" id="dis_id"  name="coupon" value="" maxlength="4"/>
  </form>
  <script>
    var falakTayebElement = document.getElementById("falk_id");
    var discountElement   = document.getElementById("dis_id");
    var totalPoints       = <?php echo $points;?>;

    falakTayebElement.onchange = function() {
      var points                  = parseInt(falakTayebElement.value);
      var discount                = points / 3 ;
      discountElement.value       = "saasa";
      //discountElement.innerHTML = discount.toFixed(2);
    };

    discountElement.onchange = function() {
      var discount = parseFloat(discountElement.value);
      var points   = discount * 3;
      if(points > totalPoints) {
        falakTayebElement.style.color = "red"; // to show error text
        falakTayebElement.value       = "ليس لديك رصيد كافي من النقاط !"
      } else {
        falakTayebElement.value       = points.toFixed(2);
      }
    }
  </script>';
  }
?>

I don't know what's wrong here, but by changing the element I didn't get any result on the other textfeild. #javascript #php #woocommerce any advice, notes..?