Javascript function is undefined

Question

Starting to learn JavaScript so I decided to make a program that would take in a string and then return the same string but it will have different colors on each character.

Not sure why when I compile, the moment I call my Rainbow function, the function isn't defined. Also, trying to print out the string but I'm not sure if I'm doing it correctly. Any logical and stylistic advice and edits is much appreciated!

<script>
    function Rainbow(x) {
        var mystring = String(x);                                              @* convert to string*@
        var Stringlength = mystring.lenth;                                     @* length fo string *@
        var rainbowstring = new Array(Stringlength);                           @* create array of appropriate size*@
        var counter = 0;
        var clr, letter;
        while (counter < Stringlength) {
            letter = mystring.charAt(counter);
            var randomnumber = Math.floor(Math.random() * 10);                     @* random number generator --> 11 means 0-10 *@        
            switch (randomnumber) {
                case 0: clr = #FF0000; break;
                case 1: clr = #00FF00; break;
                case 2: clr = #0000FF; break;
                case 3: clr = #FF00FF; break;
                case 4: clr = #000000; break;
                case 5: clr = #00FFFF; break;
                case 6: clr = #33FFFF; break;
                case 7: clr = #33FF00; break;
                case 8: clr = #FFFF00; break;
                case 9: clr = #FF66CC; break;
            }
            rainbowstring[counter] = <span style = 'color:"+clr+"'>"+letter+"</span>;                              @* assign color *@
            counter++;                                                         @* increment *@
        }
        return rainbowstring;
    }

    @* need something that generates colors *@
    @* assigns colors to text *@

</script>

<form>
    Enter String: <input type ="text" name ="rainbowstring" id ="rainbowinput"/><br>
</form>

<button
        type = "button" onclick = "Rainbow(document.getElementById('rainbowinput').value)" > Rainbow Generator
</button>

Answer 1

With a little jQuery..... jsFiddle

jQuery

var rbow, ltrColor;
var colors = new Array('00','33','66','99','CC','FF');
$('#rainbower').click(function() {
    var blah = $('#rainbowinput').val();
    var lenBlah = blah.length;
    rbow = "";
    for (c = 0; c < lenBlah; c++) {
        l = blah.charAt(c);
        ltrColor = "#";
        for (rgb = 0; rgb < 3; rgb++) {
            rndColor = (Math.floor(Math.random() * 6));
            ltrColor += colors[rndColor];
        }
        rbow += "<span style='color:" + ltrColor + "'>" + l + "</span>";
    }
     $('#rainbowoutput').html(rbow);
});

HTML

<form>
    Enter String:
    <input type="text" name="rainbowstring" id="rainbowinput" />
    <br />
</form>
<button type="button" id="rainbower">Rainbow Generator</button>
<div id="rainbowoutput"></div>

Answer 2

where do you call it? as i see it shouldnt give you undefined.

and you are doing it wrong

rainbowstring[counter] = <span style = 'color:"+clr+"'>"+letter+"</span>; 

should be:

rainbowstring[counter] = "<span style = 'color:"+clr+"'>"+letter+"</span>"; 

although better would be rainbowstring as a regular variable, as such:

rainbowstring += "<span style = 'color:"+clr+"'>"+letter+"</span>";

and at the end you should write

x.innerHTML = rainbowstring;

im also not sure if you are able to use "stringlength" consider replacing it with "strlength" or the like

Answer 3

all the color should be a string.

   switch (randomnumber) {
        case 0: clr = '#FF0000'; break;
        case 1: clr = '#00FF00'; break;
        case 2: clr = '#0000FF'; break;
        case 3: clr = '#FF00FF'; break;
        case 4: clr = '#000000'; break;
        case 5: clr = '#00FFFF'; break;
        case 6: clr = '#33FFFF'; break;
        case 7: clr = '#33FF00'; break;
        case 8: clr = '#FFFF00'; break;
        case 9: clr = '#FF66CC'; break;
    }