Increment my progress bar of password length

Question

I am trying to increment the minimum letters text progress bar of my password input using a Javascript switch. here is my current attempt.

   var div = $('#progressbar>div');

        div.width(width);

        switch(password.Length)
        {
            case 1:
                div.css('width', '10%');
                break;
            case 2:
                div.css('width', '20%');
                break;
            case 3:
                div.css('width', '30%');
                break;
            case 4:
                div.css('width', '40%');
                break;
            case 5:
                div.css('width', '50%');
                break;
            case 6:
                div.css('width', '60%');
                break;
            case 7:
                div.css('width', '70%');
                break;
            case 8:
                div.css('width', '80%');
                break;
            case 9:
                div.css('width', '90%');
                break;
            case 10:
                div.css('width', '100%');
                break;

        }

        };

the css is as follows

    #progressbar {
    margin-top: 10px;
    background-color: black;
    border-radius: 13px; /* (height of inner div) / 2 + padding */
    padding: 3px;
    }

    #progressbar > div {
    background-color: orange;
    width:0%;
    height: 10px;
    border-radius: 10px;
    }

what would i need to change to get it to work? i have tried a couple of other things but nothing is happening. FYI this is run on key up and inside a function. I am new to JavaScript so please explain :). i know i am calling the function correctly because some other functionality from it works on a different piece fo code.

Answer 1

Javascript is case-sensitive so you cannot use password.Length. Use password.length instead. And also I really don't know what div.width(width) does. Here's working example (of course you need to fix it a bit, because it can exceed 100% width): http://jsfiddle.net/74c7W/2/

Answer 2

A couple of things I notice from your code:

div.width(width);

The above line seems superfluous as you are going to amend the width anyway in your switch statement.

And what is password.Length referring to? a jquery object? It is probable that you are not switching on the value you think you are - you might need something more like password.val().length()