function Password( parent, open, withButton, id ) { const inputPassword = document.createElement('input'); inputPassword.type = 'password'; inputPassword.id = id; parent.appendChild(inputPassword); const buttonPassword = document.createElement('button'); buttonPassword.type = 'button'; buttonPassword.textContent = 'показать'; if(withButton) { parent.appendChild(buttonPassword); } const divider = document.createElement('br'); buttonPassword.addEventListener('click', () => { this.setOpen(open !== true); }); this.setValue = newValue => inputPassword.value = newValue; this.getValue = () => inputPassword.value; this.setOpen = openUpdate => { open = openUpdate; if(typeof this.onOpenChange === 'function') { this.onOpenChange(openUpdate); } buttonPassword.textContent = (openUpdate) ? 'показать' : 'скрыть'; inputPassword.type = (openUpdate) ? 'password' : 'text'; } this.getOpen = () => open; inputPassword.addEventListener('input', event => { if (typeof this.onChange === 'function'){ this.onChange(event.target.value); } }); this.addDivider = () => parent.appendChild(divider); } const password1 = new Password(document.body, true, true, 'first_password'); password1.addDivider(); const password2 = new Password(document.body, true, false, 'second_password'); password2.addDivider(); const buttonLogin = document.createElement('button'); buttonLogin.type = 'button'; buttonLogin.textContent = 'Логин'; buttonLogin.disabled = true; document.body.appendChild(buttonLogin); const isEqual = () => { buttonLogin.disabled = (password1.getValue() !== password2.getValue()); } password1.onOpenChange = (open) => { second_password.style.display = !open ? 'none' : 'inline-block'; } password1.onChange = () => { isEqual(); } password2.onChange = () => { isEqual(); }