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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<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.bgColor="saddlebrown"
document.fgColor="peru" }
else {
document.bgColor="white"
document.fgColor="black" };
}
</script>
</head>
<body>
<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="">
<p>
<input type="text" name="userText"
size="20">
<input type="button" name="setScheme"
value="Set Color Scheme" onClick="setColorScheme()">
</p>
</form>
</body>
</html>
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: http://shark.comfsm.fm/~dleeling/cis/script_bgchanger.html
The use of a single button: http://shark.comfsm.fm/~dleeling/cis/script_silly.html
The use of a series of buttons: http://shark.comfsm.fm/~dleeling/cis/script_button_style_changer.html
The use of drop down list boxes to select color combinations: http://shark.comfsm.fm/~dleeling/cis/dropdown_style.html
IS 201 Course Page Lee Ling Courses Page College of Micronesia-FSM Home Page