javascript (12) – TodoList #1

by

ToDoList 추가 #1

1. ToDoList 입력란 생성(input)
2. 입력 내용 목록 생성(li, span)

DOCTYPE HTML>
<HTML 랭=”~에“>

<머리>
<메타 문자 집합=”UTF-8“>
<메타 http-equiv=”X-UA 호환“ 콘텐츠=”IE=엣지“>
<메타 이름=”뷰포트“ 콘텐츠=”너비=장치 너비, 초기 크기=1.0“>
<링크 친척=”스타일시트“ 헥사=”CSS/style.css“>
<제목>로그인제목>
머리>

'추천 관련글,
<몸>
<h2 ID=”시계“>00:00:00h2>

<형태 ID=”로그인 양식“ 수업=”숨겨진“>
<입력 필수의 최대 길이=”15“ 유형=”텍스트“ 자리 표시자=”이름이 뭐에요?“ />
<단추>로그인단추>
형태>

<형태 ID=”인사“ 수업=”숨겨진“>
<h1>h1>
<단추>로그 아웃단추>
형태>

<형태 ID=”올폼“> // 할 일 필드
<입력 유형=”텍스트“ 자리 표시자=”할 일을 작성하고 Enter 키를 누릅니다.“ 필수의 />
형태>
<UI ID=”할 일 목록“>UI>

<사업부 ID=”인용하다“>
<기간>기간>
<기간>기간>
사업부>
<스크립트 소스=”js/greetings.js“>스크립트>
<스크립트 소스=”js/clock.js“>스크립트>
<스크립트 소스=”js/따옴표.js“>스크립트>
<스크립트 소스=”js/backgrounds.js“>스크립트>
<스크립트 소스=”js/todo.js“>스크립트>
몸>

HTML>

const toDoForm = 문서.쿼리 선택기(“#모든 형식“);
const 할 일 입력 = toDoForm.쿼리 선택기(“입력“)
const 할 일 목록 = 문서.쿼리 선택기(“#할 일 목록“);

기능 해야 할 고통(newTodo) {
const 리 = 문서.createElement(“리“);
const 기간 = 문서.createElement(“기간“);
리.추가 어린이(기간);
기간.innerText = newTodo;
할 일 목록.추가 어린이(리);

}

기능 handleToDoSubmit(이벤트) {
이벤트.preventDefault();
const newTodo = 할 일 입력.값;
할 일 입력.값 = “”;
해야 할 고통(newTodo);

}

toDoForm.addEventListener(“제출하다“, handleToDoSubmit);

* function handleToDoSubmit(event) ㅋ

event.preventDefault(); – 제출 시 자동 새로 고침 중지

const newTodo = toDoInput.value; – 입력한 값을 newTodo 변수에 저장

toDoInput.value = “” – 입력 값 초기화(비워두기) #newTodo에 저장된 변수 유지

painToDo(newTodo); – newTodo에 저장된 변수를 painToDo 함수에 전달

* 함수 painToDo ( newToDo )

const li = document.creatElemet(“li”) – 저장

  • 변수 li에 대한 태그

    const span = document.creatElemet(“span”) – 저장 변수 범위에 대한 태그

    li.appenChild(스팬); – 이동하다 아래 태그

  • 꼬리표

    기간. innerText = newTodo; – newTodo 인수를 꼬리표

    할 일 목록. appendChild(li); – 이동

  • id = todo-List인 하위 수준으로 태그

    *toDoForm.addEventListener(“제출”, handleToDoSubmit);

    – 제출 이벤트에서 handleToDoSubmit 함수 실행