Introduction to programming via JavaScript
Handout 3

In this modification of the first exercise we are going to move our script into the header. Note also the modified style statement, no external CSS file is being used.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="AUTHOR" content="Dana Lee Ling">
<title>Script Scrap 3</title>

<style type="text/css">body {font-family:verdana}</style>

<script type="text/javascript">
function setColorScheme() {
  var userBg=document.userChoice.userText.value;
  if (userBg=="low") {
   document.fgColor="peru" }
else {
   document.fgColor="black" };

<h1>Script Scrap 3</h1>

<p>Enter one of the following words and then click on the button to change the contrast of
this page:<br>
<span style="font-size:larger">low normal</span></p>

<form name="userChoice" action="">
    <input type="text" name="userText" size="20">
    <input type="button" name="setScheme"
value="Set Color Scheme" onClick="setColorScheme()">


This exercise introduces the use of a form to capture user input and then react to that input. The JavaScript uses a full if-then-else construction. Note that any word other than "low" returns the page to the "normal" colors.

The form consists of two parts: an text input box called userText and an input button called setScheme that starts the JavaScript program.

To see some more variations of the above concept:
More color choices:
The use of a single button:
The use of a series of buttons:
The use of drop down list boxes to select color combinations:

IS 201 Course Page Lee Ling Courses Page College of Micronesia-FSM Home Page