CSci 1001 Lab 3: JavaScript events

Problem 1

Modify this in-class example so that, in addition to setting the background colors of the page and the table, the font color on the page is set to yellow when the button is clicked. Add a line in the function changePage to do this.
Note that, just like style.backgroundColor refers to the background color of a page, style.color refers to the text color.

Problem 2

This problem is similar to problem 1, but now instead of the fixed color (yellow) the person can enter the new color text color.

Modify the in-class example with the form to allow the person to enter a new font color for the page: add a new text input in the form (call it textcolor) and use it in the changePage function.

Problem 3

Write a JavaScript program to determine the winner of an election. The page must have a form to enter names of two candidates and their corresponding votes. When the button is clicked, display the winner and the number of votes in the text area.
Below is the starting point for the problem. save it to a file and add the missing elements. Note that since the form gives you strings, not numbers, you need to use parseFloat as shown below to use the form data as numbers.


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>
And the winner is...
</title>
<script type="text/javascript" language="javascript">
function determineTheWinner() {
    v1 = parseFloat(document.theform.votes1.value);
    // add the rest of the function here
}
</script>
</head>
<body>
<h1>And the winner is...</h1>
<p>Please enter names of two people and how many votes each person got.</p>  
<p>
<form name="theform">
The first candidate: 
<input type="text" name="first" size=10 value="Bart Simpson" /><br />
The first number of votes: 
<input type="text" name="votes1" size=10 value="0" /><br />
<br />
<input type="button" value="Click me" 
       onClick="determineTheWinner();" />
<br />
<textarea name="winner" rows="2" cols="80" wrap="virtual"></textarea>
</form>
</p>
</body>
</html>

To submit...

Send me (and CC to yourself) all the work that you finish during the lab time. If you have not finished everything during the lab, please include the final version with the next problem set.

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.