INST377/javascript/objects.html at master · donalus/INST377 · 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
<html>
<head>
	<style type="text/css">
		.square {
			margin-top: 50px;
			margin-left: 100px;
		}

		div {
			margin-bottom: 20px;
		}

	</style>
</head>

<body>

	<div id="container"></div>

<script>


function Square (width, height, color, middlename, classname){
	this.width = width;
	this.height = height;
	this.background = color;

	Square.prototype.middlename = middlename

	// creates a div tag inside the "container" object.
	sq = document.getElementById("container").appendChild(document.createElement("div"))
	sq.setAttribute("class", classname);
	sq.setAttribute("style", "height:" + this.height);
	sq.style.width = this.width;
	sq.style.background = this.background;

	this.changeColor = function(c){
		this.background = c;
		sq.style.background = this.background;
	}
	// Task 3

		Square.prototype.putText = function(t, c) {
			sq.innerHTML = t
			sq.style.color = c
		}

}

s1 = new Square("200px", "50px", "grey", "bob", "square")


// Task 1

// Task 2
s2 = new Square("100px", "100px", "blue", "annette", "square")

</script>

</body>
</html>