javascript-25: classList.add(또는 remove) / innerText

js에서 html의 값을 추가하기

• loginForm.classList.add(“클래스 값”)

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

function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  loginForm.classList.add("hidden");
  console.log(username);
}

loginForm.addEventListener("submit", onLoginSubmit);

    <form id="login-form">
      <input
        type="text"
        placeholder="What is your name?"
        required
        maxlength="15"
      />
      <input type="submit" value="Log In" />
    </form>
    <h1 id="greeting" class="hidden"></h1>                                                                                                                           

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

const HIDDEN_CLASSNAME = "hidden";

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

loginForm.addEventListener("submit", onLoginSubmit);

1. submit 제출할 경우 onLoginSubmit 함수가 실행됨
2. onLoginSubmit함수는 event를 첫번째 인자로 받기 때문에, event.preventDefault로 페이지가 초기화되는것을 방지함
3. loginForm에 hidden 클래스를 부여해서 사라지게 하고
4. 초기에 숨겨져있는 h1태그에 hello, username을 넣어준다음
5. h1태그에 hidden 클래스를 없애서 다시 나타나게 함

• strig만 담겨져있는 변수는 보통 대문자로 표시함