function Password(parent, open){ this.textBox = document.createElement("input") this.textBox.setAttribute("type", "password") parent.appendChild(this.textBox) this.checkBox = document.createElement("input") this.checkBox.setAttribute("type", "checkbox") parent.appendChild(this.checkBox) this.isChecked = function(checkBox, textBox) { if(open === false){ this.textBox.setAttribute("type", "password") open = true; } else { this.textBox.setAttribute("type", "text") open = false; } } this.getValue = function(arg = this.textBox) { return arg.value } this.setValue = function(inner) { this.textBox.value = inner; } this.getOpen = function() { let str; open == true ? str = "closed" : str = "opened"; return str; } this.onChange = function(arg) { let data = this.getValue(arg); return data; } this.onOpenChange = function(arg) { console.log(arg) return arg } this.checkBox.onchange = () => { this.isChecked(this.checkBox, this.textBox) this.onOpenChange(this.getOpen()) }; this.textBox.oninput = () => this.onChange(this.getValue(this.textBox)); this.setOpen = function(arg) { if(!arg == true){ this.checkBox.checked = "checked" } else { this.checkBox.checked = "" } this.isChecked() } } function login(parent) { this.loginBox = document.createElement("input"); this.loginBox.setAttribute("type", "text"); this.loginBox.setAttribute("value", "login") parent.appendChild(this.loginBox); } function send(parent) { this.sendBottom = document.createElement("button"); this.sendBottom.setAttribute("disabled", true); this.sendBottom.innerText = "send"; parent.appendChild(this.sendBottom) } function loginForm(parent) { this.login = new login(parent); this.login.loginBox.oninput = () => this.sendOnChange(); this.password = new Password(parent); this.password.textBox.oninput = () => { this.sendOnChange() } this.sendBottom = new send(parent) this.sendOnChange = function() { if(this.login.loginBox.value != "" && this.password.textBox.value != "") { return this.sendBottom.sendBottom.removeAttribute("disabled"); } return this.sendBottom.sendBottom.setAttribute("disabled", true); } this.setValue = function(inner, box = this.password.textBox) { box.value = inner; } this.setValue("qwerty") this.sendOnChange() } // let j = new loginForm(document.body) // j.setValue("Вооот") function passwordVerify(parent) { this.login = new login(parent); this.login.loginBox.oninput = () => this.sendOnChange(); this.checkPasswordBox = document.createElement("span"); parent.appendChild(this.checkPasswordBox); this.password = new Password(this.checkPasswordBox); this.password.checkBox.onchange = () => { if(this.password.checkBox.checked) { this.checkPassword.remove() } else { this.checkPassword = document.createElement("input"); this.checkPassword.setAttribute("type", "password"); this.checkPasswordBox.appendChild(this.checkPassword); this.checkPassword.oninput = () => this.sendOnChange(); } this.sendOnChange() } this.password.textBox.oninput = () => this.sendOnChange(); this.checkPassword = document.createElement("input"); this.checkPassword.setAttribute("type", "password"); this.checkPasswordBox.appendChild(this.checkPassword); this.checkPassword.oninput = () => this.sendOnChange(); this.sendBottom = new send(parent); this.setValue = function(inner, box = this.password.textBox) { box.value = inner; } this.setValue("qwerty") this.sendOnChange = function() { if(this.password.checkBox.checked && this.login.loginBox.value != "" && this.password.textBox.value != "") { return this.sendBottom.sendBottom.removeAttribute("disabled"); } else { if(this.login.loginBox.value != "" && this.password.textBox.value != "" && this.password.textBox.value === this.checkPassword.value) { return this.sendBottom.sendBottom.removeAttribute("disabled"); } } return this.sendBottom.sendBottom.setAttribute("disabled", true); } } passwordVerify(document.body)