JavaScript - Submit event, 게시판 CRUD

dev_swan·2022년 1월 11일

HTML-CSS-JS

목록 보기

5/19

Submit event (click)

submit click 차이

form 태그에서 submit을 클릭하면 액션이라는 링크로 바뀌는데 submit에 id를 주고 자바 스크립트로 click 이벤트을 주었을때 click 이벤트도 먹히고 form도 작동하여 2번의 이벤트가 발생한다 (callback 함수가 잠깐 보이고 오류 발생)
form 엘리먼트에 submit 이벤트를 주고 callback 함수의 내용이 실행되는데 callback 함수 안에 preventDefault 을 주어 액션이라는 링크로 바뀌는것을 막아주어 1번의 이벤트만 발생한다.

preventDefault ()

문법
event.preventDefault
역할
form 태그 안에 submit 역할을 하는 버튼을 눌러도 새로 실행되지 않도록 하기위해 * submit은 작동된다

게시판 CRUD

Create (createElement 생성)

정의

JavaScript를 이용하여 요소를 추가하는 것.

문법

.createElement("추가할 요소")

사용 예시

const liElement = document.createElement("li")

liElement 안에 li 엘리먼트들을 생성하였다.

Read (append 추가)

정의

선택한 요소에 콘텐츠를 추가한다.

문법

.append

사용 예시

ulElement.append(liElement)

ulElement 안에 liElement를 추가하였다.

Upload

정의

선택한 요소를 수정한다.

Delete (remove 삭제)

정의

선택한 요소를 삭제한다.

문법

.remove( [selector] )

사용 예시

function removeHandeler(e){
   
    e.target.parentNode.remove() // remove 선택한 요소가 삭제된다.
}

// parentNode 한단계 상위 엘리먼트 선택

게시판 만들기 연습

오늘 배운것을 토대로 게시글을 생성하고 추가하고 삭제하는 연습을 해보았다.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>게시판 만들기 연습</title>
    <script type="text/javascript" src="./index.js"></script>
</head>
<body>
    <!-- 작동 원리-->
    <form method="get" action="./index2.html" id="todoForm"> 
        <input type="text" name="todoInput" id="todoInput">
        <input type="submit" id="todoSubmit" value="입력">
    </form>
    <ul id="todoList">
    </ul>
</body>
</html>

javascript


window.addEventListener("DOMContentLoaded",init)
function init(){
 	const submitElemnt = document.querySelector("#todoSumbit")
   	const formElement = document.querySelector("#todoForm")
   	formElement.addEventListener("submit",submitHandler) 
}

function submitHandler(event){
    event.preventDefault()
    const inputElement = document.querySelector("#todoInput")
    const ulElement = document.querySelector("#todoList")
    const liElement = document.createElement("li")
    
    console.log(liElement)

    const spanElement = document.createElement("span")
    const span2Element = document.createElement("span")
 
    spanElement.innerHTML = inputElement.value
    span2Element.innerHTML = "X"

    liElement.append(spanElement)
    liElement.append(span2Element)
    spanElement.addEventListener("click",updateHandler)
    span2Element.addEventListener("click",removeHandeler)


    console.log(liElement)

    ulElement.append(liElement)

    inputElement.value = ""

function removeHandeler(e){
    console.log(e.target.parentNode)
}
  
let uploadflag = true;
function updateHandler (e){
    if(updateFlag) updateFlag = false
    else return

    let content = e.target.innerHTML
    e.target.innerHTML = ""

    const inputElement = document.createElement("input")
    inputElement.value = content
    e.target.append(inputElement)

    inputElement.addEventListener("keypress",keypressHandler)
}

function keypressHandler(e){
    if (e.keyCode !== 13){ return }
    let content = e.target.value
    let node = e.target.parentNode
    node.innerHTML = ""
    node.innerHTML = content
    updateFlag = true
}

해석

window.addEventListener("DOMContentLoaded",init)

html이 모두 로드된 후 발생하는 이벤트이다. init 은 실행 될 함수

function init(){
 	const submitElemnt = document.querySelector("#todoSumbit")
   	const formElement = document.querySelector("#todoForm")
   	formElement.addEventListener("submit",submitHandler) 
}

html의 submit,form 요소를 javascript로 가져온 후
formElment에 "submit" 이벤트를 부여하고 , submit 할 경우 submitHandler 함수 실행도록 설정하였다.

function submitHandler(event){
    event.preventDefault()
    const inputElement = document.querySelector("#todoInput")
    const ulElement = document.querySelector("#todoList")
    const liElement = document.createElement("li")
    
    console.log(liElement)

    const spanElement = document.createElement("span")
    const span2Element = document.createElement("span")
 
    spanElement.innerHTML = inputElement.value
    span2Element.innerHTML = "X"

    liElement.append(spanElement)
    liElement.append(span2Element)
    spanElement.addEventListener("click",updateHandler)
    span2Element.addEventListener("click",removeHandeler)


    console.log(liElement)

    ulElement.append(liElement)

    inputElement.value = ""
}

submitHandler 함수에 인자값을 넣고 submit 할 경우 새로 실행되지 않도록 preventDefault()를 주었다.
이후 html의 inpt,ul 요소들을 javascript에 가져오고, li요소를 생성하였다.
console.log(li)로 중간중간 코드가 이상하지 않나 확인해주었다.
html의 span을 javscript에 가져오고 spanElement spanElement2 로 각각 span을 담도록 선언하였다.
innerHTML로 각가 spanElement, spanElement2 에 값을 넣어주었는데 spanElement에는 input value 값이 담기도록 설정하였다.
.append 로 liElement에 span을 추가하고, span2Element에 click 이벤트를 생성해주었다.
console.log(li)로 중간중간 코드가 이상하지 않나 확인해주었다.
.append 로 ulElement에 liElement를 추가하였다.
input 값을 입력하고 "sumbit" 이벤트가 실행되면 마지막에 input값을 공백으로 나타나게 설정하였다.

 function removeHandeler(e){
   console.log(e.target.parentNode)
   e.target.parentNode.remove()
}

span2Element ( "X" )를 클릭하면 li 요소를 삭제하도록 span의 상위 엘리먼트 li를 선택하기 위해 parentNode를 입력하여 li 요소를 삭제 할 수 있도록 하였다.

let uploadflag = true;
function updateHandler (e){
    if(updateFlag) updateFlag = false
    else return

    let content = e.target.innerHTML
    e.target.innerHTML = "" // span의 input 내용을 공백으로 설정

    const inputElement = document.createElement("input")
    inputElement.value = content
    e.target.append(inputElement)

    inputElement.addEventListener("keypress",keypressHandler)
}

spanElement ("input value")를 click할 시 내용을 수정할 수 있도록 e.target.element (spanElement) 의 내용을 공백으로 수정하였다.
내용을 수정하려고 click하였을때 수정할 공간이 inputbox 형태로 보이도록 e.target(span) 영역에 input을 넣어주었다.
이후 inputElement.value 안에 content를 넣어 inputbox에 value값이 넣어진 채로 수정할 수 있도록 변경되게 하였다.
내용을 한번 수정하다가 다시 click하였을때 함수가 실행되지 않도록 uploadfalg = true로 선언해주고 updateflag가 true일 경우 false로 바꾸고 true가 아닐경우 return하여 반복하여 수정하지 않도록 설정하였다.
이후 변경한 내용을 저장할 수 있도록 inputElement에 keyperss이벤트를 넣고 콜백함수를 설정해주었다.

function keypressHandler(e){
    if (e.keyCode !== 13){ return }
    let content = e.target.value
    let node = e.target.parentNode
    node.innerHTML = ""
    node.innerHTML = content
    updateFlag = true
}

keypressHandler의 인자값을 e로 넣어주고 e의 keycode가 13이 아닐경우 return하여 저장할 수 없게 설정하였다. * keycode 13 = enter
enter를 눌러 내용을 수정하였을때의 e.target.value(inputElement 내용)를(을) content로 선언하였다. (담아두었다)
이후 node로 e.target.parentNode(span)를(을) 선언하고 enter를 눌러 내용을 수정하면 빈값으로 변하게하고 e.target.value(inputElement 내용)를(을) 보이게 설정하였다.
이후 수정을 완료하고 다시 click하여 수정을 해야할 수 있으니 updateFlag값을 true로 바꿔 다시 수정할 수 있도록 설정하였다.