Undefined using arrays in nested ifs in JavaScript

Question

I have to cenvert numbers to words. Problem is that arrays return result only in the first nested if I use them in the others return undefined. For example:

100 - one hundred

101 - undefined hundred and one

120 - undefined hundred and twenty

121 - undefined hundred and undefined one.

Can you tell why this happens?

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Problem 8. Number as words.js"></script>
</head>
<body>
<p>number <input type="text" id="digit"></p>
<input type="button" id="button" value="Check">
<div id="output"></div>
</body>
</html>

JavaSript:

onload = function () {
var digit = document.getElementById('digit');
var button = document.getElementById('button');
var output = document.getElementById('output');
var units = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var tenths = ['twenty', 'thirty', 'fourty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
var toTwenty = ['ten', 'eleven', ' twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];

function check() {
    var num = digit.value;
    if (num>=0 && num<10) {
        output.innerHTML = units[num];
    }
    else if (num>=10 && num<20){
        output.innerHTML = toTwenty[num%10];
    }
    else if (num>=20 && num<100) {
        if (num%10==0){
            output.innerHTML = tenths[num / 10 - 2];
        }
        else {
            output.innerHTML = tenths[num / 10 - 2] + ' ' + units[num % 10];
        }
    }
    else if(num>=100 && num<1000) {
        if (num%100==0) {
            output.innerHTML = units[num / 100] + ' hundred';
        }
        else if (num%100>0 && num%100<10) {
            output.innerHTML = units[num / 100] + ' hundred and ' + units[num %10];
        }
        else if (num%100>=10 && num%100<20) {
            output.innerHTML = units[num / 100] + ' hundred and ' + toTwenty[num % 10];
        }
        else if (num%10==0) {
            output.innerHTML = units[num / 100] + ' hundred and ' + tenths[(num % 100) / 10 - 2];
        }
        else {
            output.innerHTML = units[num / 100] + ' hundred and ' + tenths[(num % 100) / 10 - 2] + ' ' + units[num % 10];
        }
    }
}

button.addEventListener('click', check);
}

You have to change minus to percent or use Math.floor/Math.ceil, eg: output.innerHTML = tenths[num / 10 - 2] + ' ' + units[num % 10] to output.innerHTML = tenths[num % 10 - 3] + ' ' + units[num % 10], your version returns numbers using float notation and therefore doesn't find particular element in array (because of fraction part after dividing) — SzybkiSasza
– SzybkiSasza, Commented Jun 1, 2015 at 15:39

Alex McMillan · Accepted Answer · 2015-06-01 15:38:17Z

1

The problem is with your usage of math.

You have an array units:

['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];

which you are using like so:

units[num / 100]

But if num is, for example, 107, then 107 / 100 = 1.07 and there is no element in units at index 1.07.

You need to round the number - up or down, I leave it to you - Math.floor(num / 100); or Math.ceil(num / 100);

answered Jun 1, 2015 at 15:38

Alex McMillan

18.1k13 gold badges63 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Rosano · Accepted Answer · 2015-06-01 15:41:59Z

1

Problem here is that you are using "num / 100" and "num/10" which gives a non integer result -> you cannot find the item on the array.

You should use instead Math.floor(num/100) and Math.floor(num/10) to round down to the lowest integer

Hope it helps Dan

answered Jun 1, 2015 at 15:41

Daniel Rosano

6955 silver badges16 bronze badges

Collectives™ on Stack Overflow

Undefined using arrays in nested ifs in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related