개발하는 루루언니

html : onkeydown 내가 엔터를 누르면 이벤트가 실행 본문

컴퓨터 정보

html : onkeydown 내가 엔터를 누르면 이벤트가 실행

혜닝혜루 2022. 11. 25. 21:38
728x90
반응형

 

 

 

ToDo

ToDo

  • 리엑트공부
  • css 공부

HTML 코드

<input type="text" 
    id="todo-input"
    onkeydown="KeyCodeCheck()"
    
    />

onkeydown을 input에 이벤트를 적용하고 실행할 자바스크립트 함수 KeyCodeCheck를 적용시킨다.

지금 콘솔로 해놔서 안보이지만 내가 글자를 적으면 해당 value값이 작용되면서 엔터를 누르면 이벤트가 실행된다.

const todoinput = document.querySelector('#todo-list')


// 인풋의 값들을 가져오는 함수
const KeyCodeCheck = function () {
  if(window.event.keyCode === 13 ){
    
    const inputValue = document.querySelector('#todo-input').value
    const newLi = document.createElement('li')
    const newsapn = document.createElement('span')
 
  
    newsapn.textContent=inputValue
    
    newLi.appendChild(newsapn)

    console.log(newLi)
  }
  
}​

 

728x90