반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

짧은코딩

js) 이벤트 및 preventDefault() 함수 사용 본문

노마드 코더/바닐라 JS로 크롬 앱 만들기

js) 이벤트 및 preventDefault() 함수 사용

5_hyun 2022. 4. 8. 01:41
반응형
    <div id="login-form">
        <input type="text" placeholder="what is your name?"/>
        <button>Log In</button>
    </div>
const loginForm = document.getElementById("long-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");

이런 방법으로 html의 버튼을 js에서 가져올 수 있다.

 

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

이렇게 하면 코드를 더 줄일 수 있다.

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

function onLoginBtnClck() {
    console.dir(loginInput);
    console.log("click!");
}

loginButton.addEventListener("click", onLoginBtnClck);

이렇게 구현하면 input에 사용자가 입력한 것을 알 수 있다.

<div id="login-form">
        <input type="text" value="lalalalal" placeholder="what is your name?"/>
        <button>Log In</button>
    </div>

이렇게 하면 자동적으로 input에 lalalalal이 있다.

 

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

function onLoginBtnClck() {
    console.log("hello", loginInput.value);
}

loginButton.addEventListener("click", onLoginBtnClck);

hello + 사용자가 입력한 값을 콘솔에 나오게 한다.

function onLoginBtnClck() {
    const username = loginInput.value;
    if (username === ""){
        alert("please write your name");
    } else if(username.length > 15) {
        alert("your name is too long.")
    }
}

이렇게 하면 입력에 조건을 추가할 수 있다.

 

하지만

 <form id="login-form">
        <input required
        maxlength="15"
        type="text" 
        placeholder="what is your name?"
        />
        <button>Log In</button>
    </form>

html에서 required maxlength를 쓰면 html에서 제어할 수 있다. required maxlength는 반드시 form 안에서 써야한다.

저걸 쓰면 설정보다 더 긴 값은 입력할 수 없다.

html은 form 안에서 엔터를 누르고 input이 더 존재하지 않으면 자동 sumbit된다. 우리의 목표는 submit되는 순간 데이터를 저장하고 싶다.

submit는 엔터를 누르거나 버튼을 클릭할 때 발생한다.

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


function onLoginSumbit() {
    const username = loginInput.value;
   console.log(username);
}

loginForm.addEventListener("sumbit", onLoginSumbit);

이렇게 하면 form을 submit 할 때 입력하는 값을 받아낸다. 하지만 from이 submit 되는 것은 브라우저의 기본이라 막지 못하고 있다. 그래서 새로고침을 못하도록 해야한다.

 

()가 있다는 건 즉시 실행 시켜주는 것이다. 하지만 우린 즉시 실행하고 싶지 않다.

 

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


function onLoginSumbit(event) {
    event.preventDefault();
    console.log(event);
}

loginForm.addEventListener("sumbit", onLoginSumbit);

preventDefault() 함수는 브라우저에서 일어나는 기본 동작을 막아준다. 즉 form이 sumbit하는 것을 막아준다.

    <a href="https://nomadcoders.co">Go to courses</a>
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

const link = document.querySelector("a");

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

loginForm.addEventListener("sumbit", onLoginSumbit);
link.addEventListener("click", handleLinkClick)

html 위 같이 하고 js에 클릭하면 alert 뜨게하면 바로 링크로 넘어가지 않는다. 확인을 누르고 나면 링크로 넘어간다.

 

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

const link = document.querySelector("a");

function onLoginSumbit(event) {
    event.preventDefault();
    console.log(loginInput.value);
}
function handleLinkClick(event){
    event.preventDefault();
    console.dir(event)
}

loginForm.addEventListener("sumbit", onLoginSumbit);
link.addEventListener("click", handleLinkClick)

이렇게 하면 링크로 넘어가는 것을 막아주고 정보를 콘솔에 보여준다.

<body>
    <form id="login-form">
        <input required
        maxlength="15"
        type="text" 
        placeholder="what is your name?"
        />
        <button>Log In</button>
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
</body>
.hidden{
    display: none;
}
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden"

function onLoginSumbit(event) {
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    //greeting.innerText="Hello " + username;
    greeting.innerText=`Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME)
}

loginForm.addEventListener("submit", onLoginSumbit);

이렇게하면 form에 입력을 하면 from이 css의 hidden 때문에 사라지고 js의

    greeting.innerText=`Hello ${username}`;

이것으로 인하여 Hello (username)이 화면에 출력된다.

반응형
저작자표시

'노마드 코더 > 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글

js) CLOCK  (1) 2022.04.28
js) LOGIN  (0) 2022.04.16
js) 이벤트 및 if문 활용  (0) 2022.04.06
js) 여러 함수 및 dir, document  (0) 2022.04.05
js) JS 변수, 함수 등 기본 개념 정리  (0) 2022.04.04
'노마드 코더/바닐라 JS로 크롬 앱 만들기' Related Articles more
Comments