Функция Javascript не определена

Question

Начав изучать JavaScript, я решил сделать программу, которая будет принимать строку, а затем вернуть ту же строку, но она будет иметь разные цвета для каждого символа.

Не знаете, почему при компиляции, как только я вызываю функцию Rainbow, функция не определена. Также, пытаясь распечатать строку, но я не уверен, правильно ли я делаю это. Любые логические и стилистические советы и исправления очень ценятся!

<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

все цвета должны быть строкой.

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; 
    } 

Answer 2

где вы его назвали? как я вижу, он не должен давать вам неопределенное.

и вы делаете это неправильно

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

должно быть:

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

хотя лучше бы rainbowstring как обычный переменной, как например:

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

и на конец вы должны написать

x.innerHTML = rainbowstring; 

им также не уверен, что если вы можете использовать «StringLength» рассмотреть вопрос о замене его «strlength» или как

Answer 3

С небольшим 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>