I am converting numbers into words as well as showing them on screen also trying to show a word in javascript and html

Question

I am trying to convert a number into word also showing them while i input the number , the same thing with a word where i input a word and it show while i type on screen, but having some trouble as after pressing a character it shows after pressing next character like "if it i m writing 'hi' then it will only show 'h' first then when i type him it shows 'hi' " what to do here is the code

<html>
   <head>
      <title>HTML - Convert numbers to words using JavaScript</title>
      <script src="numtoword.js" type="text/javascript"></script>
   </head>
   <body>
      <h1>
         HTML - Convert numbers to words using JavaScript
      </h1>
      <input id="Text1" type="text"  onkeydown="onlywords();"   onkeyup="NumToWord(this.value,'divDisplayWords');"
         maxlength="9" />
      <br />
      <br />
      <div id="divDisplayWords" style="font-size: 13; color: Teal; font-family: Arial;">
      </div>
      <script>
        function onlywords(){
            var x = document.getElementById("Text1").value;
            document.getElementById("divDisplayWords").innerHTML = x;
        }
      </script>
   </body>
</html>

also the javscript file

function NumToWord(inputNumber, outputControl) {

    if (inputNumber > 48 || inputNumber < 57) {

        var str = new String(inputNumber)
        var splt = str.split("");
        var rev = splt.reverse();
        var once = ['Zero', ' One', ' Two', ' Three', ' Four', ' Five', ' Six', ' Seven', ' Eight', ' Nine'];
        var twos = ['Ten', ' Eleven', ' Twelve', ' Thirteen', ' Fourteen', ' Fifteen', ' Sixteen', ' Seventeen', ' Eighteen', ' Nineteen'];
        var tens = ['', 'Ten', ' Twenty', ' Thirty', ' Forty', ' Fifty', ' Sixty', ' Seventy', ' Eighty', ' Ninety'];

        numLength = rev.length;
        var word = new Array();
        var j = 0;

        for (i = 0; i < numLength; i++) {
            switch (i) {

                case 0:
                    if ((rev[i] == 0) || (rev[i + 1] == 1)) {
                        word[j] = '';
                    } else {
                        word[j] = '' + once[rev[i]];
                    }
                    word[j] = word[j];
                    break;

                case 1:
                    aboveTens();
                    break;

                case 2:
                    if (rev[i] == 0) {
                        word[j] = '';
                    } else if ((rev[i - 1] == 0) || (rev[i - 2] == 0)) {
                        word[j] = once[rev[i]] + " Hundred ";
                    } else {
                        word[j] = once[rev[i]] + " Hundred and";
                    }
                    break;

                case 3:
                    if (rev[i] == 0 || rev[i + 1] == 1) {
                        word[j] = '';
                    } else {
                        word[j] = once[rev[i]];
                    }
                    if ((rev[i + 1] != 0) || (rev[i] > 0)) {
                        word[j] = word[j] + " Thousand";
                    }
                    break;


                case 4:
                    aboveTens();
                    break;

                case 5:
                    if ((rev[i] == 0) || (rev[i + 1] == 1)) {
                        word[j] = '';
                    } else {
                        word[j] = once[rev[i]];
                    }
                    if (rev[i + 1] !== '0' || rev[i] > '0') {
                        word[j] = word[j] + " Lakh";
                    }

                    break;

                case 6:
                    aboveTens();
                    break;

                case 7:
                    if ((rev[i] == 0) || (rev[i + 1] == 1)) {
                        word[j] = '';
                    } else {
                        word[j] = once[rev[i]];
                    }
                    if (rev[i + 1] !== '0' || rev[i] > '0') {
                        word[j] = word[j] + " Crore";
                    }
                    break;

                case 8:
                    aboveTens();
                    break;

                    //            This is optional. 

                    //            case 9:
                    //                if ((rev[i] == 0) || (rev[i + 1] == 1)) {
                    //                    word[j] = '';
                    //                }
                    //                else {
                    //                    word[j] = once[rev[i]];
                    //                }
                    //                if (rev[i + 1] !== '0' || rev[i] > '0') {
                    //                    word[j] = word[j] + " Arab";
                    //                }
                    //                break;

                    //            case 10:
                    //                aboveTens();
                    //                break;

                default:
                    break;
            }
            j++;
        }

        function aboveTens() {
            if (rev[i] == 0) {
                word[j] = '';
            } else if (rev[i] == 1) {
                word[j] = twos[rev[i - 1]];
            } else {
                word[j] = tens[rev[i]];
            }
        }

        //word.reverse();
        var finalOutput = '';
        for (i = 0; i < numLength; i++) {
            finalOutput = finalOutput + word[i];
        }
        document.getElementById(outputControl).innerHTML = finalOutput;
    }
}

might want to see this one http://stackoverflow.com/questions/14766951/convert-digits-into-words-with-javascript — ChatGPT, Jan 16 '17 at 08:39
What is the use of `if (inputNumber > 48 || inputNumber < 57) { }`? Any number is EITHER greater than 48 OR less than 57. — Wais Kamal, Jan 16 '17 at 13:18
actually i was trying to use that for charCode but it didnt work @wais Kamal — Himanshu Goyal, Jan 16 '17 at 17:10

score 0 · Answer 1 · answered Jan 16 '17 at 07:30

That's easy. Just change onkeydown="onlywords()" to onkeyup="onlywords()". Here is a working snippet:

    function NumToWord(inputNumber,outputControl) {

if(inputNumber>48 ||inputNumber<57){

    var str = new String(inputNumber)
    var splt = str.split("");
    var rev = splt.reverse();
    var once = ['Zero', ' One', ' Two', ' Three', ' Four', ' Five', ' Six', ' Seven', ' Eight', ' Nine'];
    var twos = ['Ten', ' Eleven', ' Twelve', ' Thirteen', ' Fourteen', ' Fifteen', ' Sixteen', ' Seventeen', ' Eighteen', ' Nineteen'];
    var tens = ['', 'Ten', ' Twenty', ' Thirty', ' Forty', ' Fifty', ' Sixty', ' Seventy', ' Eighty', ' Ninety'];

    numLength = rev.length;
    var word = new Array();
    var j = 0;

    for (i = 0; i < numLength; i++) {
        switch (i) {

            case 0:
                if ((rev[i] == 0) || (rev[i + 1] == 1)) {
                    word[j] = '';
                }
                else {
                    word[j] = '' + once[rev[i]];
                }
                word[j] = word[j];
                break;

            case 1:
                aboveTens();
                break;

            case 2:
                if (rev[i] == 0) {
                    word[j] = '';
                }
                else if ((rev[i - 1] == 0) || (rev[i - 2] == 0)) {
                    word[j] = once[rev[i]] + " Hundred ";
                }
                else {
                    word[j] = once[rev[i]] + " Hundred and";
                }
                break;

            case 3:
                if (rev[i] == 0 || rev[i + 1] == 1) {
                    word[j] = '';
                }
                else {
                    word[j] = once[rev[i]];
                }
                if ((rev[i + 1] != 0) || (rev[i] > 0)) {
                    word[j] = word[j] + " Thousand";
                }
                break;


            case 4:
                aboveTens();
                break;

            case 5:
                if ((rev[i] == 0) || (rev[i + 1] == 1)) {
                    word[j] = '';
                }
                else {
                    word[j] = once[rev[i]];
                }
                if (rev[i + 1] !== '0' || rev[i] > '0') {
                    word[j] = word[j] + " Lakh";
                }

                break;

            case 6:
                aboveTens();
                break;

            case 7:
                if ((rev[i] == 0) || (rev[i + 1] == 1)) {
                    word[j] = '';
                }
                else {
                    word[j] = once[rev[i]];
                }
                if (rev[i + 1] !== '0' || rev[i] > '0') {
                    word[j] = word[j] + " Crore";
                }                
                break;

            case 8:
                aboveTens();
                break;

            //            This is optional. 

            //            case 9:
            //                if ((rev[i] == 0) || (rev[i + 1] == 1)) {
            //                    word[j] = '';
            //                }
            //                else {
            //                    word[j] = once[rev[i]];
            //                }
            //                if (rev[i + 1] !== '0' || rev[i] > '0') {
            //                    word[j] = word[j] + " Arab";
            //                }
            //                break;

            //            case 10:
            //                aboveTens();
            //                break;

            default: break;
        }
        j++;
    }

    function aboveTens() {
        if (rev[i] == 0) 
            { 
                word[j] = ''; 
            }

        else if (rev[i] == 1) 
            {
             word[j] = twos[rev[i - 1]]; 
         }
        else 
            { 
                word[j] = tens[rev[i]]; 
            }
    }

   //word.reverse();
    var finalOutput = '';
    for (i = 0; i < numLength; i++) {
        finalOutput = finalOutput + word[i];
    }
    document.getElementById(outputControl).innerHTML = finalOutput;
    }

<html>
   <head>
      <title>HTML - Convert numbers to words using JavaScript</title>
      <script src="numtoword.js" type="text/javascript"></script>
   </head>
   <body>
      <h1>
         HTML - Convert numbers to words using JavaScript
      </h1>
      <input id="Text1" type="text"  onkeyup="onlywords();"   onkeyup="NumToWord(this.value,'divDisplayWords');"
         maxlength="9" />
      <br />
      <br />
      <div id="divDisplayWords" style="font-size: 13; color: Teal; font-family: Arial;">
      </div>
      <script>
        function onlywords(){
            var x = document.getElementById("Text1").value;
            document.getElementById("divDisplayWords").innerHTML = x;
        }
      </script>
   </body>
</html>

score 0 · Answer 2 · answered Jan 16 '17 at 08:27

You might need some check for the value you are going to get. I would probably add a key check first.

You need this, because will you code recognize the value if user changes the position of caret and type next number before the one already typed? (eg oldValue = 1, newValue = 21)

I use this kind of thing in my own directive which triggers on keypress, might be useful in you case too:

var keyCode = (evt.which) ? evt.which : event.keyCode;
var char = String.fromCharCode(keyCode);
var oldValue = elem[0].value;
var position = elem.context.selectionStart;
var newValue = [oldValue.slice(0, position), char, oldValue.slice(position)].join('');

This way your newValue is going to reflect the exact value the user typed in the input field.

Frogger · Answer 3 · 2017-01-16T08:37:56.910

The reason its not showing until the next character is typed is because on keydown the field has only the prior characters in the field(empty on first keydown). Only on keyup the key added to the field.

So the other answers of onkeyup="onlywords()" is correct but you should not have two onkeyup() in an elements as only the prior onkeyup() will get invoked. So just concatinate the two onkeyup() events like onkeydown="onlywords(); NumToWord(this.value,'divDisplayWords');"

But since this is a bit messy I suggest you to have the onlywords() logic inside the NumToWord function and set the text as a default if a valid text was not found to convert.

Yeah that is the option i am trying to do since if i can just add a case where i can check if the inputted text is number or word — Himanshu Goyal, Jan 16 '17 at 11:04

score 0 · Answer 4 · answered Jan 18 '17 at 09:01

Here I have completed the code for the number conversion.

first is the html part

    <html>
<head>
    <title>HTML - Convert numbers to words using JavaScript</title>

    <script src="numtoword.js" type="text/javascript"></script>
</head>

<body>

    <h1>

        HTML - Convert numbers to words using JavaScript</h1>

    <input id="Text1" type="text"  onkeydown="onlywords();"   onkeyup="NumToWord(this.value,'divDisplayWords');"

        maxlength="9" />

    <br />

    <br />

    <div id="divDisplayWords" style="font-size: 13; color: Teal; font-family: Arial;">

    </div>
<script>
function onlywords(){
var x = document.getElementById("Text1").value;
    document.getElementById("divDisplayWords").innerHTML = x;
}
</script>

</body>

</html>

now there the second is the javscript part numtoword.js

    function NumToWord(inputNumber,outputControl) {

if(inputNumber>45 || inputNumber<57){
    var str = new String(inputNumber);
    var splt = str.split("");
    var rev = splt.reverse();
    var once = ['Zero', ' One', ' Two', ' Three', ' Four', ' Five', ' Six', ' Seven', ' Eight', ' Nine'];
    var twos = ['Ten', ' Eleven', ' Twelve', ' Thirteen', ' Fourteen', ' Fifteen', ' Sixteen', ' Seventeen', ' Eighteen', ' Nineteen'];
    var tens = ['', 'Ten', ' Twenty', ' Thirty', ' Forty', ' Fifty', ' Sixty', ' Seventy', ' Eighty', ' Ninety'];

    numLength = rev.length;
    var word = new Array();
    var j = 0;

    for (i = 0; i < numLength; i++) {
        switch (i) {

            case 0:
                if ((rev[i] == 0) || (rev[i + 1] == 1)) {
                    word[j] = '';
                }
                else {
                    word[j] = '' + once[rev[i]];
                }
                word[j] = word[j] ;
                break;

            case 1:
                aboveTens();
                break;

            case 2:
                if (rev[i] == 0) {
                    word[j] = '';
                }
                else if ((rev[i - 1] == 0) || (rev[i - 2] == 0)) {
                    word[j] = once[rev[i]] + " Hundred ";
                }
                else {
                    word[j] = once[rev[i]] + " Hundred and";
                }
                break;

            case 3:
                if (rev[i] == 0 || rev[i + 1] == 1) {
                    word[j] = '';
                }
                else {
                    word[j] = once[rev[i]];
                }
                if ((rev[i + 1] != 0) || (rev[i] > 0)) {
                    word[j] = word[j] + " Thousand";
                }
                break;


            case 4:
                aboveTens();
                break;

            case 5:
                if ((rev[i] == 0) || (rev[i + 1] == 1)) {
                    word[j] = '';
                }
                else {
                    word[j] = once[rev[i]];
                }
                if (rev[i + 1] !== '0' || rev[i] > '0') {
                    word[j] = word[j] + " Lakh";
                }

                break;

            case 6:
                aboveTens();
                break;

            case 7:
                if ((rev[i] == 0) || (rev[i + 1] == 1)) {
                    word[j] = '';
                }
                else {
                    word[j] = once[rev[i]];
                }
                if (rev[i + 1] !== '0' || rev[i] > '0') {
                    word[j] = word[j] + " Crore";
                }                
                break;

            case 8:
                aboveTens();
                break;


            default: break;
        }
        j++;
    }

    function aboveTens() {
        if (rev[i] == 0) 
            { 
                word[j] = ''; 
            }

        else if (rev[i] == 1) 
            {
             word[j] = twos[rev[i - 1]]; 
         }
        else 
            { 
                word[j] = tens[rev[i]]; 
            }
    }

   word.reverse();
    var finalOutput = '';
    for (i = 0; i < numLength; i++) {
        finalOutput = finalOutput + word[i];
    }
    document.getElementById(outputControl).innerHTML = finalOutput;
    }
else if(inputNumber>65  || inputNumber<90){
    var x= document.getElementById('Text1').value;
    document.getElementById(outputControl).innerHTML =x; 
}



}

this got my work done as the number was converting as well as the text was working as well .

I am converting numbers into words as well as showing them on screen also trying to show a word in javascript and html

4 Answers4