javascript 로그인 버튼 만들기

html 버튼 코드

<div class = idPw>
	<div>
		<label for = "idBar">전화번호, 사용자 이름 또는 이메일</label>
		<input class = "idBar" type = "text">
	</div>
	<div class = "pwBar_1">
		<label for = "pwBar">비밀번호</label>
		<div class = "pwBar_2"><input class = "pwBar" type = "password"></div>
		<div class = "pwBar_3"><a href="#">비밀번호 표시</a></div>
	</div>
	<div><button onclick="login()" class = "idBarButton">로그인하기</button></div>
    
 //onclick="login()"을 통해서 자바스크립트의 login() 함수와 연결하는 것 같음

자바스크립트 로그인 함수

let button_control = document.querySelector("button")
console.log(button_control)

//.querySelector()는 CSS 선택자로 요소를 선택하게 해줍니다.
//주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것입니다.

let id_control = document.querySelector(".idBar")
console.log(id_control);

let pw_control = document.querySelector(".pwBar")
console.log(pw_control);
//각각 idBar, pwBar 클래스의 첫번째 요소를 선택하여 변수에 할당


function login(){
    let idBox = id_control.value;
    let pwBox = pw_control.value;
    console.log(idBox);
    console.log(pwBox);

//쿼리셀렉터로 받아온 값을 idBox, pwBox에 할당함.

    if (idBox === "digicam" && pwBox === "100400"){
        alert("로그인 성공");
        location.reload()
        
//location.reload()는 채워진 박스를 원래대로 돌리는 것 같다.
        
    }else {alert("로그인 실패")
location.reload()
}
}

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=o3k3585&logNo=220869653667
getElementById로 하는 방법도 시도해보기.