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>

@DanielA.White I'm not sure how to do that. You mean something like '#33FFFF' ? — Liondancer
– Liondancer, Commented Aug 28, 2013 at 0:55
You also made a typo: mystring.lenth should be mystring.length. — Kevin Ji
– Kevin Ji, Commented Aug 28, 2013 at 1:08
@user814064 That is completely unnecessary; function statements work fine here. — Kevin Ji
– Kevin Ji, Commented Aug 28, 2013 at 1:09

Jake Lin · Accepted Answer · 2013-08-28 01:00:01Z

4

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

answered Aug 28, 2013 at 1:00

Jake Lin

11.5k6 gold badges31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Math chiller · Accepted Answer · 2013-08-28 01:01:43Z

1

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

edited Aug 28, 2013 at 1:01

answered Aug 28, 2013 at 0:55

Math chiller

4,1876 gold badges32 silver badges44 bronze badges

5 Comments

Math chiller Over a year ago

@Liondancer please include that code it may be because your script tag isnt at the end of your body element

Math chiller Over a year ago

@Liondancer place the script under the button

Liondancer Over a year ago

I don't feel as thought putting teh script under the function will help.

Liondancer Over a year ago

w3schools.com/js/js_functions.asp function was defined first then it was called later on. You need to relax

Math chiller Over a year ago

@Liondancer fine dont listen im just saying to try it.

animuson · Accepted Answer · 2014-07-21 21:51:30Z

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

edited Jul 21, 2014 at 21:51

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Aug 28, 2013 at 1:16

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges

Collectives™ on Stack Overflow

Javascript function is undefined

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related