[Event-click 예제]

1. Form을 만든다.

<h1>이벤트 연습하기</h1>
    <form>
      <label for="event">event</label>
      <input type="text" id="event" placeholder="텍스트를 입력하세요." />
      <button>입력</button>
      <span></span>
    </form>
    <ol class="Lists"></ol>

    <template>
      <li class="list"></li>
    </template>

2. click이벤트를 작성한다

let form = document.querySelector("form");
let inputText = document.querySelector("input");
let button = document.querySelector("button");
let span = document.querySelector("span");
let template = document.querySelector("template");
let Lists = document.querySelector(".Lists");

// 목표 : 텍스트 창에 글을 쓰고 입력을 누르면 아래에 텍스트가 뜬다
// 목표 : 텍스트가 없으면 에러이벤트가 실행되면서 텍스트 입력창에 잘못입력되었다는 텍스트가 뜬다

// 1. 텍스트에 글을 입력하고 버튼을 누르면 텍스트의 값이 저장된다.
// 2. 저장된 값을 템플레이트에 넣는다
// 3. 텝플레이트를 프린트한다.

function saveText(event) {
  event.preventDefault();
  //정보를 복사한 템플 리스트에 넣는다.
  let newTemplate = document.importNode(template.content, true);
  let list = newTemplate.querySelector(".list");
  let text = inputText.value;
  if (text !== "") {
    list.innerHTML = text;
    listPrint(list);
  } else {
    errorText();
  }
}

function listPrint(list) {
  // 완성된 리스트를 프린트한다.
  Lists.prepend(list);
  inputText.value = "";
  span.innerHTML = "";
}

function errorText() {
  span.innerHTML = "텍스트가 입력되지 않았습니다!!";
}

button.addEventListener("click", saveText);

css

body {
  width: 80%;
  margin: 0 auto;
}

form {
  display: grid;
}

form > label {
  font-size: 20px;
  font-weight: bold;
}

form input {
  width: 50%;
  height: 50px;
}

form button {
  width: 10%;
  height: 30px;
  margin: 10px;
}

form span {
  color: red;
}