Skip to content

Commit b326076

Browse files
dchenkdchenk
committed
Moved all methods out of main function body to set as prototype
1 parent ccbd5ec commit b326076

2 files changed

Lines changed: 44 additions & 45 deletions

File tree

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html><html lang="en">
22
<head>
33
<meta charset="UTF-8">
4-
<title>DynamicTextFields</title>
4+
<title>Dynamic TextFields</title>
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<link rel="stylesheet" type="text/css" href="./textfields.css">
77
<style>
@@ -37,7 +37,7 @@
3737

3838
<br>
3939

40-
<div>This one's value changes when the first one's changes:</div>
40+
<div>This field’s value changes when the first one’s changes:</div>
4141
<div class="dyn-textfield">
4242
<input type="text" class="dyn-textfield-input" id="three">
4343
<label for="three" class="dyn-textfield-label">Label for Three</label>

‎textfields.js‎

Lines changed: 42 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
"use strict";
22

3-
// Create a DynamicTextFields object using the "new" operator, with the only
4-
// argument passed in being the ID of an element that will contain all of the
5-
// text fields you will want registered and styled.
3+
// Create a DynamicTextFields object using the "new" operator, with the only argument passed in being
4+
// the ID of an element that will contain all of the text fields you will want registered and styled.
65
function DynamicTextFields(containerID) {
76

87
if (!containerID) {
@@ -12,57 +11,57 @@ function DynamicTextFields(containerID) {
1211

1312
this.container = document.getElementById(containerID);
1413

15-
this.resetStyle = function(evt) {
16-
if (evt.target.value.trim() === "") {
17-
if (evt.target.classList.contains("required")) {
18-
evt.target.classList.add("not-set");
19-
} else {
20-
this.classList.remove("notempty");
21-
}
14+
}
15+
16+
DynamicTextFields.prototype.resetStyle = function(evt) {
17+
if (evt.target.value.trim() === "") {
18+
if (evt.target.classList.contains("required")) {
19+
evt.target.classList.add("not-set");
2220
} else {
23-
if (evt.target.classList.contains("required")) {
24-
evt.target.classList.remove("not-set");
25-
}
26-
this.classList.add("notempty");
21+
this.classList.remove("notempty");
2722
}
28-
}
29-
30-
this.resetAllStyles = function() {
31-
let els = this.container.getElementsByClassName("dyn-textfield-input");
32-
for (let i = 0; i < els.length; i++) {
33-
if (els[i].value === "") {
34-
els[i].classList.remove("notempty");
35-
} else {
36-
els[i].classList.add("notempty");
37-
}
23+
} else {
24+
if (evt.target.classList.contains("required")) {
25+
evt.target.classList.remove("not-set");
3826
}
27+
this.classList.add("notempty");
3928
}
29+
}
4030

41-
this.registerAll = function() {
42-
let fs = this.container.getElementsByClassName("dyn-textfield-input");
43-
if (fs.length === 0) {
44-
return;
45-
}
46-
for (let i = 0; i < fs.length; i++) {
47-
fs[i].addEventListener("change", this.resetStyle);
31+
DynamicTextFields.prototype.resetAllStyles = function() {
32+
let els = this.container.getElementsByClassName("dyn-textfield-input");
33+
for (let i = 0; i < els.length; i++) {
34+
if (els[i].value === "") {
35+
els[i].classList.remove("notempty");
36+
} else {
37+
els[i].classList.add("notempty");
4838
}
4939
}
40+
}
5041

51-
this.deregisterAll = function() {
52-
let els = this.container.getElementsByClassName("dyn-textfield-input");
53-
for (let i = 0; i < els.length; i++) {
54-
els[i].removeEventListener("change", this.resetStyle);
55-
}
42+
DynamicTextFields.prototype.deregisterAll = function() {
43+
let els = this.container.getElementsByClassName("dyn-textfield-input");
44+
for (let i = 0; i < els.length; i++) {
45+
els[i].removeEventListener("change", this.resetStyle);
5646
}
47+
}
5748

58-
// registerRefresher registers a listener on a text field that, when changed, affects the the value
59-
// of another text field (making the affected field needed a style reset). Register a refresher
60-
// to ensure that the input being set programmatically will appear correctly based on whether it's empty.
61-
this.registerRefresher = function(toListenID, toRefreshID) {
62-
let r = document.getElementById(toRefreshID);
63-
document.getElementById(toListenID).addEventListener("input", this.resetStyle.bind(r));
64-
}
49+
// registerRefresher registers a listener on a text field that, when changed, affects the the value
50+
// of another text field (making the affected field needing a style reset). Register a refresher to
51+
// ensure that the input being set programmatically will appear correctly based on whether it's empty.
52+
DynamicTextFields.prototype.registerRefresher = function(toListenID, toRefreshID) {
53+
let r = document.getElementById(toRefreshID);
54+
document.getElementById(toListenID).addEventListener("input", this.resetStyle.bind(r));
55+
}
6556

57+
DynamicTextFields.prototype.registerAll = function() {
58+
let fs = this.container.getElementsByClassName("dyn-textfield-input");
59+
if (fs.length === 0) {
60+
return;
61+
}
62+
for (let i = 0; i < fs.length; i++) {
63+
fs[i].addEventListener("change", this.resetStyle);
64+
}
6665
}
6766

6867
export default DynamicTextFields;

0 commit comments

Comments
 (0)