how to convert my input field number to words

Question

How do I convert my input field number to words?

My simple text box:

<div>Please type a number:</div>
<input type="text" onchange="doConvert()" id="numberInput">
<input type="text" id="result">
<div ><div>
</body>
</html>

The script:

<script>
function doConvert (){
    let numberInput = document.querySelector('#numberInput').value ;
    let myDiv = document.querySelector('#result');

    let oneToTwenty = ['','one ','two ','three ','four ', 'five ','six ','seven ','eight ','nine ','ten ',
    'eleven ','twelve ','thirteen ','fourteen ','fifteen ','sixteen ','seventeen ','eighteen ','nineteen '];
    let tenth = ['', '', 'twenty','thirty','forty','fifty', 'sixty','seventy','eighty','ninety'];

    if(numberInput.toString().length > 7) return myDiv.value = 'overlimit' ;
    console.log(numberInput);
   // let num = ('0000000000'+ numberInput).slice(-10).match(/^(\d{1})(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/);
  let num = ('0000000'+ numberInput).slice(-7).match(/^(\d{1})(\d{1})(\d{2})(\d{1})(\d{2})$/);
    console.log(num);
    if(!num) return;

    let outputText = num[1] != 0 ? (oneToTwenty[Number(num[1])] || `${tenth[num[1][0]]} ${oneToTwenty[num[1][1]]}` )+' million ' : ''; 
  
    outputText +=num[2] != 0 ? (oneToTwenty[Number(num[2])] || `${tenth[num[2][0]]} ${oneToTwenty[num[2][1]]}` )+'hundred ' : ''; 
    outputText +=num[3] != 0 ? (oneToTwenty[Number(num[3])] || `${tenth[num[3][0]]} ${oneToTwenty[num[3][1]]}`)+' thousand ' : ''; 
    outputText +=num[4] != 0 ? (oneToTwenty[Number(num[4])] || `${tenth[num[4][0]]} ${oneToTwenty[num[4][1]]}`) +'hundred ': ''; 
    outputText +=num[5] != 0 ? (oneToTwenty[Number(num[5])] || `${tenth[num[5][0]]} ${oneToTwenty[num[5][1]]} `) : ''; 

    myDiv.value = outputText;
}
</script>

If I input 100000, it only reads one hundred. When there are 2 zeros on the same line the code skips reading it.

Please read [ask] and https://ericlippert.com/2014/03/05/how-to-debug-small-programs/. For example, when you did `console.log(num);` with a large input, what result did you get? If that isn't what you expected, what di you expect instead? How about the results of `num[1]`, `num[2]` etc. (**Why isn't** `num[0]` used?) How about the results of the comparisons? How about the value of `outputText` **after each step** of the calculation? Did you try to check **which functions are called*? — Karl Knechtel, Oct 19 '22 at 21:28
Please ask 1 specific researched non-duplicate question. Please either ask about 1 bad query/function with the obligatory [mre] & why you think it should return something else at the 1st subexpression that it doesn't give what you expect, justified by reference to authoritative documentation, or ask about your overall goal giving working parts you can do & ideally a [mre]. But please ask about the former 1st because misconceptions in the former will get in the way of understanding the latter. And bad code doesn't tell us what you wish it would do. [ask] [Help] — philipxy, Oct 20 '22 at 00:49
Debug questions require a [mre]--cut & paste & runnable code including initialization; desired & actual output (including verbatim error messages); tags & versions; clear specification & explanation. For debug that includes the least code you can give that is code that you show is OK extended by code that you show is not OK. [ask] [Help] When you get a result you don't expect, find the first point in the execution where the state of the variables is not what you expect & say what you expected & why, justified by documentation. (Debugging fundamental.) — philipxy, Oct 20 '22 at 00:49

Satyam Saurabh · Answer 1 · 2022-10-19T16:58:39.330

The problem that I found out it was with comparison when you are generating outputText where you did something like

num[1] != 0

Here the value of num[1] was "0", a string value and you are comparing it to the integer value, here 0 which was causing the problem.

Here is a working example

function doConvert() {
  let numberInput = parseInt(document.querySelector('#numberInput').value);
  let myDiv = document.querySelector('#result');

  let oneToTwenty = ['', 'one ', 'two ', 'three ', 'four ', 'five ', 'six ', 'seven ', 'eight ', 'nine ', 'ten ',
    'eleven ', 'twelve ', 'thirteen ', 'fourteen ', 'fifteen ', 'sixteen ', 'seventeen ', 'eighteen ', 'nineteen '
  ];
  let tenth = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];

  if (numberInput.toString().length > 7) return myDiv.value = 'overlimit';
  console.log(numberInput);
  // let num = ('0000000000'+ numberInput).slice(-10).match(/^(\d{1})(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/);
  let num = ('0000000' + numberInput).slice(-7).match(/^(\d{1})(\d{1})(\d{2})(\d{1})(\d{2})$/);
  console.log(num);
  if (!num) return;

  let outputText = num[1] != "0" ? (oneToTwenty[Number(num[1])] || `${tenth[num[1][0]]} ${oneToTwenty[num[1][1]]}`) + ' million ' : '';

  outputText += num[2] != "0" ? (oneToTwenty[Number(num[2])] || `${tenth[num[2][0]]} ${oneToTwenty[num[2][1]]}`) + 'hundred ' : '';


  outputText += num[3] != "0" ? (oneToTwenty[Number(num[3])] || `${tenth[num[3][0]]} ${oneToTwenty[num[3][1]]}`) + ' thousand ' : '';

  outputText += num[4] != "0" ? (oneToTwenty[Number(num[4])] || `${tenth[num[4][0]]} ${oneToTwenty[num[4][1]]}`) + 'hundred ' : '';

  outputText += num[5] != "0" ? (oneToTwenty[Number(num[5])] || `${tenth[num[5][0]]} ${oneToTwenty[num[5][1]]} `) : '';


  myDiv.value = outputText;
}

<div>Please type a number:</div>
<input type="text" onchange="doConvert()" id="numberInput">
<input type="text" id="result">
<div>
  <div>

how to convert my input field number to words

1 Answers1