I am not getting any output for this js code

This is the code -

    <input type="text" id="field">
    <input type="button" onclick="test()">
    <p id="demo"></p>

    <script type="text/javascript">
        function test(){
            var a = document.getElementById("field").value;
            var b = a.split(" ");
            for(var i=0; i<b.length; i++){
                var x[i] = 0;
                for(var j=0; j<b[i].length; j++){
                    if(b[i][j] == 'e' || b[i][j] == 'a' || b[i][j] == 'i' || b[i][j] == 'o' || b[i][j] == 'n' || b[i][j] == 'r' || b[i][j] == 't' || b[i][j] == 'l' || b[i][j] == 's' || b[i][j] == 'u'){
                        x[i]++;
                    }
                    else if(b[i][j] == 'd' || b[i][j] == 'g'){
                        x[i]+=2;
                    }
                    else if(b[i][j] == 'b' || b[i][j] == 'c' || b[i][j] == 'm' || b[i][j] == 'p'){
                        x[i]+=3;
                    }
                    else if(b[i][j] == 'f' || b[i][j] == 'h' || b[i][j] == 'w' || b[i][j] == 'y'){
                        x[i]+=4;
                    }
                    else if(b[i][j] == 'k'){
                        x[i]+=5;
                    }
                    else if(b[i][j] == 'j' || b[i][j] == 'x'){
                        x[i]+=8;
                    }
                    else{
                        x[i]+=10;
                    }
                }
            }
            document.getElementById("demo").innerHTML = x[0];
            /*if(x[0] > x[1]){
                document.getElementById("demo").innerHTML = b[0];
            }
            else{
                document.getElementById("demo").innerHTML = b[1];
            }*/
        }
    </script>
</body>

I am not getting any output for this code. I am printing here x[0] but not getting anything. Please help me with this code. What's wrong in this code. I tried everything.