-
Notifications
You must be signed in to change notification settings - Fork 0
/
increment-button-classname
150 lines (124 loc) · 3.6 KB
/
increment-button-classname
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Increment / Decrement By 15 Button</title>
<meta name="description" content="Javascript increase or decrease by 15 buttons.">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0; maximum-scale=1.0, width=device-width">
<meta name="author" content="Lynn Stanikmas">
<style>
* {
border:none;
outline:none;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
background-image: url('images/symphony.png');
}
#wrapper{
width:100%;
font-family: Helvetica, Arial, sans-serif;
}
ol, ul {
list-style: none;
}
.example {
width:14em;
margin:0 auto;
background-color:#211911;
color:#faf4ef;
}
.child {
width:7em;
margin:0 auto;
text-align:center;
height: 3.44em;
font-size: 2em;
line-height:3.3em;
font-weight:bold;
margin:3.5em 0 1.25em 0;
}
button {
width: 3.44em;
height: 3.44em;
font-size: 2em;
font-weight:bold;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
cursor:pointer;
color:#211911;
background-color:#caf1f5;
float:left;
position:relative;
display:block;
}
.button2 {
margin-left:.1em;
}
.clear {
clear:all;
}
</style>
</head>
<html>
<body>
<div id="wrapper">
<ul class="example">
<li class="child">0</li>
</ul>
<ul class="example">
<li>
<button class="button">+</button><!--click to increment the value of 'child'-->
<button class="button2">-</button><!--click to decrease the value of 'child'-->
<div class="clear"></div>
</li>
</ul>
<script>
var counted = 0;<!--establish that 'counted' is a number and its value is initially set to '0'-->
var button = document.getElementsByClassName("button")[0];<!--establish that this is a button being clicked in the function below-->
var button2 = document.getElementsByClassName("button2")[0];<!--establish that this is a button being clicked in the function below-->
var list = document.getElementsByClassName("child")[0]<!--establish that list is the element classed 'child'-->
button.onclick = function(){
if (counted < 15) {
counted++;
} else if (counted = 15) {
counted = 0;
}
list.innerHTML = counted;
<!--alert(counted);-->
}
button2.onclick = function(){
if (counted > 0) {
counted--;
} else if (counted = 0) {
counted = 0;
}
list.innerHTML = counted;
<!--alert(counted);-->
}
</script>
</div><!--END wrapper-->
</body>
</html>