forEach문 - check박스를 이용한 비밀번호 표시(비밀번호 보기)

우선, 나는 check 박스를 click했을 때 checked 가 true 이면 input의 타입을 바꾸고, false일때도 바꾸는 식을 작성했는데,

(true : 비밀번호 password를 text로 false : text를 password로) 

비밀번호 확인창까지 같은 반복문으로 사용하려하니 name을 이용해야했고, 이러니 NodelList가 생성되었다.

 

그래서 노드리스트의 반복을 위해 forEach문을 알아보기로 했다.(찾아봤을때 많이들 사용하고 있길래..)

좀 더 가볍다는듯....? 아직 자세하겐 몰라서 아 대충 이런거군. 이라는 느낌으로 봐주면 좋겠다.

 

우선 나의 경우 NodelList가 되어버린 name의 파라미터(매개변수)명을 정해주고 시작하겠다.

 

const pwdOpen = document.getElementByName('pwd'); // pwdOpen이라는 이름으로 name이 pwd인 input의 파라미터를 불러온다.(나의 경우 비밀번호 입력 input과 비밀번호 확인 input의 name을 pwd로 통일했다.)

그로인해 NodelList가 생성되었다. 이를 console.log(pwdOpen); 해보면 아래처럼 나온다.

우선 배열명이 되어버린 pwdOpen을 나타내보면

const pwdOpen = [input#pwd, input#pwdcheck];

이다.

 

이제 forEach를 알아보자.

ex)

const pwdOpen = [input#pwd, input#pwdcheck];

pwdOpen.forEach(function(pw) { 

console.log(pw); 

})

 

결과물은  console 창에서 

이런식으로 나온다. 또한 아래처럼 작성해도 결과는 같다.

 

pwdOpen.forEach(pw =>{

console.log(pw)

})

 

이처럼 순차적으로 한번 씩 다 출력하는 걸 알 수 있다.

그 말은 즉, 배열pwdOpen을 index[0]부터 index.length까지 순회한다는 것이다.

for문을 이용하는 것에 비해 훨씬 간결하게 작성할 수 있었다.

 

이제 비밀번호 보기에 들어가보도록 하겠다.

 

우선 조건을 달자면,

다음과 같다.

- 비밀번호 입력란의 id와 name은 pwd 이고,

- 비밀번호 확인란의 id는 pwdCheck, name은 pwd로 비밀번호 입력란과 동일하다.

- 체크박스를 이용하여, type=password로 가려진 비밀번호를 type=text로 바꿔 볼 수 있도록 하고 싶다.(주요사항)

- 비밀번호 보기의 id는 pwdOpen이고, onclick 프로퍼티를 이용하여 클릭시 이벤트가 일어나도록 한다.

*프로퍼티란 객체 자체에 프로퍼티로 이벤트를 주는 것 이다. 함수 하나만 할당이 가능하다.

- pwd_open()함수를 onclick 프로퍼티에 연결한다.

 

준비가 다 되었다면 연결된 script를 보도록 하자.

 

처음, 비밀번호 입력란만 체크박스를 이용하여 보도록 하는 코드이다.

비밀번호 입력란의 id인 pwd를 상수 pword로 파라미터를 연결한다.

비밀번호 보기(표시) 체크박스의 id인 pwdOpen을 상수 check로 파라미터 연결을 한다.

 

(1)비밀번호 입력란에 비밀번호를 입력한 후 제대로 입력했는지 확인하거나, (2)규칙이 어려워 내가 비밀번호를 제대로 치고있는지 확인하기 위해 다음과 같은 체크박스를 넣어 체크하면 동작하는 방식이다.

이는 다음과 같이 표현할 수도 있다.

if문 안에서 boolean값이 있다면, 기본값은 boolean값이 true일때 괄호안의 문장이 실행된다.

그렇기때문에, 굳이 check.checked를 true와 같은지 확인하지 않아도 된다.

이를 해석하면,

1. 체크박스가 체크되었을때if(check.checked)

2. 비밀번호입력란의 type 속성이 기본 설정값인 password에서 text로 {pword.setAttribute('type','text')} 변한다.

3. 아니면(체크를 다시 해제하면) (else) 바뀐 설정값인 text에서 password로 다시 바뀐다.{pword.setAttribute('type','password')}

 

그렇다면, 비밀번호 입력란과, 비밀번호 확인란 모두 체크박스 하나로 컨트롤 하려면 어떻게 할까?

내가 처음 생각했을때는 name을 이용하면 될 것 같다고 생각했다. 

다른 인풋을 한꺼번에 통제하기 위해서 name을 통일 시키면 통제가 가능하기 때문이다. 

그래서 name을 이용해서 두가지의 input을 묶어보았다.

 

pword에 getElementsByName('pwd');를 이용해 네임이 pwd인 input들을 다 가져온다.

그러면 이렇게 노드 리스트가 생성된다. 

우리는 이 노트 리스트를 0번 노드부터 1번노드까지 두번 순회해야한다. 

그러기 위해서 반복문을 사용해야하는데 가장 가볍고 간단한 forEach문을 사용할 것이다.

 

기존과 방식은 같다. if문이 true이면 내부의 실행문이 실행되는 형식이다.

1. if(true)이면 내부에서 반복문이 실행된다. name=pwd인 input들의 type이 text로 바뀐다.

2.if(false)이면 역시 반복문을 실행한다. name=text로 바뀐 input들을 다시 password로 바꾼다.

 

이와같이 체크박스를 이용한 비밀번호 표시를 해낼 수 있었다.