I am not getting any output for this js code

Question

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.

Answer 1

Please Try This

function test(){
        var a = document.getElementById("field").value;
        var b = a.split(" "),x;
        var x =[];
        for(var i=0; i<b.length; i++){
            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];
        }*/
    }

Answer 2

You declared the x array inside a for loop therefore it's not available outside of it. Try moving the declaration outside of the loop.

Answer 3

This issue is caused by your wrong array declaration var x[i] = 0;

Change it to something like this: var x = new Array();
Then access each index via x[index]

See https://www.w3schools.com/js/js_arrays.asp

Answer 4

This line itself is a problem var x[i] = 0; That's not how you declare an array. Here is how you do it var x = []; but since you want to set the first element to 0 then you can do this var x = [0]; just replace this line and your code should work.

Also to check the problem your code in the future when you encounter error, on browser press F12 key to open developer tools then see the console window/tab and it'll tell you exactly what the problem in your code.

EDIT

After reading your code again I saw that @Ankul Chaudhary 's answer is probably what you wanted to achieve since in the comment in your code you intent to compare items inside array x which in his solution he declared array x outside of the loop which it won't reset its values and keep all the calculated values inside the array which allow you to access later in the code

Answer 5

Try this:

  function test(){ var a = document.getElementById("field").value; console.log(a); var b = a.split(" "); console.log(b); for(var i = 0; i < b.length; i++) { var x = []; 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[b.length -1]; } } 

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