[Javascript] input 입력값 가져와서 출력하기

IT/Javascript

hi.anna 2020. 8. 10. 01:51

<input> 필드에 입력받은 값을 화면에 출력하는 방법입니다.

사용자가 타이핑 할때마다 input 값 출력하기

See the Pen js by anna (@hianna) on CodePen.

HTML

<input id='name' onkeyup='printName()'/>
<div id='result'></div>

<input id='name' onkeyup='printName()'/>

사용자로부터 값을 입력 받을, id='name'인 <input> element를 생성하였습니다.

onkeyup 이벤트(키보드가 눌려졌을 때 발생하는 이벤트)가 발생하면, printName() 메소드를 호출하도록 하였습니다.

<div id='result'></div>

<input> 폼에 입력받은 값을 출력할 위치입니다.

Javascript

function printName()  {
  const name = document.getElementById('name').value;
  document.getElementById("result").innerText = name;
}

const name = document.getElementById('name').value;

document.getElementById는 웹페이지에서 id로 element를 찾습니다.

그리고, 찾아온 element의 value값을 읽어와서 name에 저장하였습니다.

document.getElementById("result").innerText = name;

document.getElementById로 웹페이지에서 'result' id를 가진 element를 찾아오고,

innerText 프로퍼티를 사용하여, element의 text값을 name으로 변경해 주었습니다.

See the Pen js by anna (@hianna) on CodePen.

사용자가 입력을 완료하고, 마우스 커서를 input form 밖으로 이동시켰을 때

값을 읽어와서 화면에 출력하는 예제입니다.

'사용자가 타이핑 할때마다 input 값 출력하기' 예제와 동일하고,

발생 시키는 이벤트를 'onchange' 이벤트로 변경하였습니다.

input form에 대한 다른 포스팅

[HTML]<form>태그로 사용자 입력 받기

input form에 이벤트가 발생했을 때

Javascript로 웹페이지의 dom에 접근하여,

입력된 값을 가져와서, 웹페이지에 뿌려주는 방법을 알아보았습니다.