login input value

//const loginForm = document.getElementById("login-form"); // ===  .querySelector("#login-form");
//const loginInput =  loginForm.querySelector("input");
//const loginButton =  loginForm.querySelector("button"); 아래 두 줄의 코드와 같은 역할을 한다.

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form input");

const username = loginInput.value;
const link = document.querySelector("a");

function onLoginSubmit(event) {
    event.preventDefault();
    console.log(loginInput.value);
}

function handleLinkClick(event) {
    event.preventDefault();
    console.log(event);
    alert("clicked!");
}

loginForm.addEventListener("submit",onLoginSubmit);
link.addEventListener("click",handleLinkClick);

기본 동작을 방해

 

event가 발생할 떄 브라우저가 내 함수를 호출하는데

onLoginSubmit() 이렇게 비어있는 상태로 호출하지 않고

(djwidnc) 정보를 가진 채로 호출하게 된다.

 

참고 사이트

https://jae04099.tistory.com/entry/HTML-script-%ED%83%9C%EA%B7%B8%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%9C%84%EC%B9%98-%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C