Cannot get output if using input value id-CodePudding

Its a amount to word convert. If I use div or p tag and use their id, then its showing the output. But when I use input and its id, then shows nothing.

Its trying to convert amount to word with change option. Its Indian currency conversion. Its showing noting if I use input option. Please forgive me if this a stupid question as i am not an expert.

$(document).ready(function () {
  var amount = document.getElementById('value').value;
  var fraction = Math.round(frac(amount) * 100);
  var f_text = "";
  if (fraction > 0) {
    f_text = "AND "   convert_number(fraction)   " Paisa";
  }
  var words = convert_number(amount)   " Rupee "   f_text   " Only";
  document.getElementById("word").innerHTML = words;
  return convert_number(amount)   " Rupee "   f_text   " Only";
});
function frac(f) {
  return f % 1;
}
function convert_number(number) {
  console.log('number: '   number);
  if ((number < 0) || (number > 999999999)) {
    return "NUMBER OUT OF RANGE!";
  }
  var Gn = Math.floor(number / 10000000); 
  number -= Gn * 10000000; 
  var kn = Math.floor(number / 100000); 
  number -= kn * 100000; 
  var Hn = Math.floor(number / 1000); 
  number -= Hn * 1000; 
  var Dn = Math.floor(number / 100); 
  number = number % 100; 
  var tn = Math.floor(number / 10); 
  var one = Math.floor(number % 10); 
  var res = "";

  if (Gn > 0) {
    res  = (convert_number(Gn)   " Crore");
  }
  if (kn > 0) {
    res  = (((res == "") ? "" : " ")  
    convert_number(kn)   " Lakh");
  }
  if (Hn > 0) {
    res  = (((res == "") ? "" : " ")  
    convert_number(Hn)   " Thousand");
  }
  if (Dn) {
    res  = (((res == "") ? "" : " ")  
    convert_number(Dn)   " Hundred");
  }
    
    var ones = Array("", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen");
    
    var tens = Array("", "", "Twenty", "Thirty", "Fourty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety");
    
    if (tn > 0 || one > 0) {
      if (!(res == "")) {
        res  = " ";
      }
      if (tn < 2) {
        res  = ones[tn * 10   one];
      }
      else {
        res  = tens[tn];
        if (one > 0) {
          res  = (" "   ones[one]);
        }
      }
    }
    if (res == "") {
      res = "Zero";
    }
    return res;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="value" />
<div id="word"></div>

CodePudding user response：

Its works with DIV or P tags because the script runs when the page is ready.

If you want that it will be updated after the change, you can do something like this:

$(document).ready(function () {
  $("#value").on("change", function() {
    var amount = $(this).val();
    
  var fraction = Math.round(frac(amount) * 100);
  var f_text = "";
  if (fraction > 0) {
    f_text = "AND "   convert_number(fraction)   " Paisa";
  }
  var words = convert_number(amount)   " Rupee "   f_text   " Only";
  document.getElementById("word").innerHTML = words;
  });
});

function frac(f) {
  return f % 1;
}
function convert_number(number) {
  console.log('number: '   number);
  if ((number < 0) || (number > 999999999)) {
    return "NUMBER OUT OF RANGE!";
  }
  var Gn = Math.floor(number / 10000000); 
  number -= Gn * 10000000; 
  var kn = Math.floor(number / 100000); 
  number -= kn * 100000; 
  var Hn = Math.floor(number / 1000); 
  number -= Hn * 1000; 
  var Dn = Math.floor(number / 100); 
  number = number % 100; 
  var tn = Math.floor(number / 10); 
  var one = Math.floor(number % 10); 
  var res = "";

  if (Gn > 0) {
    res  = (convert_number(Gn)   " Crore");
  }
  if (kn > 0) {
    res  = (((res == "") ? "" : " ")  
    convert_number(kn)   " Lakh");
  }
  if (Hn > 0) {
    res  = (((res == "") ? "" : " ")  
    convert_number(Hn)   " Thousand");
  }
  if (Dn) {
    res  = (((res == "") ? "" : " ")  
    convert_number(Dn)   " Hundred");
  }
    
    var ones = Array("", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen");
    
    var tens = Array("", "", "Twenty", "Thirty", "Fourty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety");
    
    if (tn > 0 || one > 0) {
      if (!(res == "")) {
        res  = " ";
      }
      if (tn < 2) {
        res  = ones[tn * 10   one];
      }
      else {
        res  = tens[tn];
        if (one > 0) {
          res  = (" "   ones[one]);
        }
      }
    }
    if (res == "") {
      res = "Zero";
    }
    return res;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="value" />
<div id="word"></div>