인간은 같은 실수를 반복한다. 어제 포스팅한 글에 에러를 해결한 방법을 이야기하며 앞으로 해당 부분이 나오면 잘 생각해보자고 했는데 오늘도 같은 실수를 반복했다.
repl.it 문제로 미리 구현 되어있는 html 태그에 DOM으로 접근하여 내용을 추가하는 문제였다. 비밀번호 값과 비밀번호를 재입력한 값이 다르면 특정 문구가 보여져야한다.
아래 코드로 구현해봤으나 제대로 되지 않았다. 우선 변수를 선언해 내용을 추가 하고 싶은 부분의 html 요소를 할당했다. 그리고 비밀번호가 다르면 .innerHTML을 사용하여 주어진 문구를 넣고 넣은걸 페이지에 추가하는 로직을 구현했다.
const anotherPW = document.getElementById('re-password');
anotherPW.addEventListener('keyup', function(event) {
if (passwordValue !== rePasswordValue) {
const pInsert = document.getElementsByClassName('alert');
const pSelector = document.querySelector('p#alert');
pInsert.innerHTML("비밀번호가 일치하지 않습니다");
pInsert.appendChild(selectPTag);
}
})문제를 제대로 읽지 않아 태그는 이미 구현 되어있고 내용만 추가하면 된다는 사실을 제대로 확인하지 못했다. 확인 후 appendChild를 지웠으나 그래도 태그에 내용이 들어가지 않았다.
또한,querySelector를 지우고 getElementsByClassName를 사용했지만 이 또한 답이 아니었다.
아래는 html 태그에 맞게 들어간 js 코드이다.
const anotherPW = document.getElementById('re-password');
anotherPW.addEventListener('keyup', function(event) {
const passwordValue = document.getElementById('password').value;
const rePasswordValue = document.getElementById('re-password').value;
if (passwordValue !== rePasswordValue) {
document.getElementsByClassName('alert')[0].innerHTML = "비밀번호가 같지 않습니다.";
} else {
document.getElementsByClassName('alert')[0].innerHTML = " ";
}
})getElementsByClassName[0]로 코드를 수정했더니 태그에 원하는 내용이 추가되었다. getElementsByClassName을 변수로 선언하여 활용할 때는 어떤 class인지 특정 해줘야한다. 내가 작성한 코드 내 class 이름이 1개이더라도 해당 메소드는 getElements이기 때문에 여러 개의 class를 지정한다.
앞으로 1개의 class를 가져올 경우는 querySelector를 사용해 아예 어떤 요소인지를 특정하여 변수에 할당하거나 아니면 id를 써야겠다.
getElementsByClassName는 복수의 class를 선택하기 때문에 변수에 할당할 때는 특정 해줘야한다.
