class와 id차이

class --> 여러 요소에 중복해서 이름을 줄 수 있습니다.

id --> 중복해서 줄 수 없습니다.

클릭이벤트

클릭이벤트를 만들기 위해서,
먼저 const로 변수를 만들어 주었다.
변수명은 thisIsButton

const thisIsButton document.getElementsByClassName('login-btn')[0];

getElementsByClassName함수로 login-btn이라는 클래스 이름이 있는 요소를 찾았다.

이 후에 [0]은 class가 여러 요소에 중복해서 이름을 줄 수 있기 때문에,
getElementsByClassName으로 요소를 찾으면 여러 요소가 담긴 배열이 반환된다.

해당 클래스 이름을 가진 요소가 하나밖에 없다면,
요소가 하나인 (배열 길이가 한 개인) 배열이 반환된다..

위에서 button이라는 변수에
.login-btn 요소를 찾아서 저장했다.

그 요소에 addEventListner를 달아주었다.
thisisButton.addEventListener('click', function() {
// click했을 때 실행되어야할 기능
});

thisisButton.addEventListener('click', function(){
//click했을 때 실행...
});

addEventListener가

thisIsButton.addEventListener('click', function() {
const password = document.getElementById('password').value
const rePassword = document.getElementById('re-password').value;
if(!password) {
alert('비밀번호를 입력해주세요!');
return;
}

addEventListener

addEventListener(type, listener[, options]);

type
반응할 이벤트 유형을 나타내는 대소문자 구분 문자열

listener
지정된 타입의 이벤트가 발생하였을 때, 알림(Event 인터페이스를 구현하는 객체)을 받는 객체

options
이벤트 리스너에 대한 특성을 지정하는 옵션 객체이다.
사용 가능한 옵션은
링크텍스트
을 참고하면 된다.