SHARE
Facebook X Pinterest WhatsApp

HTML Goodies: Script Tip: Week 83

Written By
thumbnail
Joe Burns
Joe Burns
Jan 4, 2005

 

Tips…

     OK, let’s play with the arguments and write this to the page.


The Script’s Effect


Here’s the Code


     We’re going to continue with the function from last time, so here it is again:

function ColoredText() {

var argLen = ColoredText.arguments.length;

if (argLen == 0)

{argLen = 1}



var text = ColoredText.arguments[0];

var textLen = ColoredText.arguments[0].length;

var defClrsArray = new Array(“red”,”purple”,”cyan”,”green”,”blue”,”magenta”); //default colors, change as needed



for (i=0; i<textLen; i++) {

charColor = text.charAt(i);



if (argLen == 1)

{

colorCode = Math.floor(Math.random() * defClrsArray.length);

tempStr = charColor.fontcolor(defClrsArray[colorCode])

}



else

{

colorCode = i % (argLen – 1);

tempStr = charColor.fontcolor(ColoredText.arguments[colorCode+1])

}

document.write(tempStr)

}

}

// Stop hiding –>


</SCRIPT>

     We’ve already used up just about the entire function. This time around we’re interested in just this:


else

{

colorCode = i % (argLen – 1);

tempStr = charColor.fontcolor(ColoredText.arguments[colorCode+1])

}

document.write(tempStr)

}

}

     Se how it starts with “else”? That’s because I cut it off in the middle of an if statement. If the display text carries an argument with it, then this Else statement is brought into play.

     The variable “colorCode” is given a numeric value through a fairly fancy equation.

     The value of “i” is “%” against the argument length minus one. For example, you have six arguments. It would be six colors in this case. Let’s say the for loop has rolled a few times and is now equal to five.

     The percent sign is a mathematical operator that returns the remainder of an equation. So let’s do the math.

     5 % (6-1) gives us 5 % 5. There is no remainder so zero is returned. That is equal to the first element in the array created through the argument. The loop rolls again. Now “i” is equal to six.

     6 % (6-1) gives 6 % 5 equal 1.2. Two is the remainder and is returned. The third color in the array is returned. (JavaScript starts counting at zero)



TechCrawler


Want more information about
text?
Search the Web.



     The next line works just like its partner from last week. The charColor.fontcolor is given the value represented by the array of arguments plucked out by whatever number is returned by the line we just went through plus one. That value is assigned to the variable “tempStr”.

     Again, in the world of Javascript, fontcolor is equal to <FONT COLOR> in HTML. Look at the source code in Navigator to see them all.

     That’s pretty slick, eh?

     Lastly, a basic document.write puts “tempStr” on the page and we’re done.

     Next time we’ll get into some clocks. First of, by request, a graphic oriented clock.

Next Week: Anyone got the time?



     Do YOU have a Script Tip you’d like to share? How about suggesting a Script Tip to write about? I’d love to hear it. Write me at:
jburns@htmlgoodies.com.

Learn to write your own JavaScripts with the

Recommended for you...

The Revolutionary ES6 Rest and Spread Operators
Rob Gravelle
Aug 23, 2022
Ahead of Time (AOT) Compilation in Angular
Tariq Siddiqui
Aug 16, 2022
Converting a JavaScript Object to a String
Rob Gravelle
Aug 14, 2022
Understanding Primitive Type Coercion in JavaScript
Rob Gravelle
Jul 28, 2022
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.