Javascript-Homework/textfieldsAssignment.html at main · Thinkgraser/Javascript-Homework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WDV221 Intro Javascript - Operators and Textfields Assignment</title>

<style>

body {background-color:#C99;
}

.highlightTitle	{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-style:italic;
	font-size:14px;
	text-decoration:underline;
	color:#096;
}


</style>


<script>
	var count = 0;
function displayOne(){
  var value1 = document.getElementById("value1").value;
  document.getElementById("result1").value = value1;
}
function displayTwo(){
  var value2 = document.getElementById("value2").value;
  document.getElementById("result2").value = value2;
}
function multiply(){
  var value1 = document.getElementById("value1").value;
  var value2 = document.getElementById("value2").value;
  document.getElementById("result3").value = (value1 * value2);
}
function add(){
  var value1 = document.getElementById("value1").value;
  var value2 = document.getElementById("value2").value;
  document.getElementById("result4").value = (parseFloat(value1) + parseFloat(value2));
}
function increaseCount(){
  count++;
  document.getElementById("result5").value = count;
}
function resetCount(){
count = 0;
}

</script>


</head>

<body>
<h2>WDV221 Intro Javascript</h2>
<h3>Project 3 - Operators and Textfields - Assignment</h3>
<hr />
<p>Please complete the following exercises on this page. When complete post this page to your  server. Make a link in your WDV221 homework  page for this assignment. </p>
<p>Include a comment in each script with the exercise number and a description of what the script is supposed to do.</p>
<p>Using Blackboard submit this  Assignment.</p>
<hr />
<h3>Instructions</h3>
<p>Use the form fields for the input values. For each of the following exercises create a function what will be activated by the button.  </p>
<form name="form1" method="post" action="">
  <p>Enter a number for value1:
    <input type="text" id="value1"/>
  </p>
  <p>Enter a number for value 2:
    <input type="text" id="value2"/>
  </p>
  <p>1.
    <input type="button" value="Display value1" onclick="displayOne()"/>
    Display the value you entered for value1:
  <input type="text" id="result1"/>
  </p>
  <p>2.
    <input type="button" value="Display value2" onclick="displayTwo()"/>
    Dislplay the value you entered for value2:
  <input type="text" id="result2"/>
  </p>
  <p>3.
    <input type="button" value="Multiply" onclick="multiply()"/>
    Display the value of value1 * value2:
  <input type="text" id="result3"/>
  </p>
  <p>4.
    <input type="button" value="Add" onclick="add()"/>
    Display the results of value1 + value2 in the following textfield.
  <input type="text" id="result4"/>
  </p>
  <p>5.
    <input type="button" value="Increment count" onclick="increaseCount()"/>
    Use the increment operator to add 1 to count and display the new value of count.
  <input type="text" id="result5"/>
  </p>
  <p>
    <input type="reset" name="Reset" id="button" value="Reset" onclick="resetCount()">
  </p>
</form>
<p>&nbsp;</p>
</body>
</html>