Javascript input 입력값 가져오기

이건 면접 때 나온 필기.. 못썼던 문제입니다.

​

https://hianna.tistory.com/411

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

필드에 입력받은 값을 화면에 출력하는 방법입니다.  사용자가 타이핑 할때마다 input 값 출력하기 See the Pen js by anna (@hianna) on CodePen.  HTML 사용자로부터 값을 입력 받을, id='name'인 element를..

hianna.tistory.com

HTML

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

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

​

사용자로부터 값을 입력 받을 id='name'인 <input> element 를 생성하고

onkeyup 이벤트(키보드가 눌렸을 때 발생하는 이벤트)가 발생하면, printName() 메소드를 호출하고

<input> 폼에 입력받은 값을 출력할 위치는 <div>

​

Javascript

function printName() {

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

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

}

​

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

-> documnet.getElementById 로 웹페이젱서 id로 element(name)를 찾고 찾아온 element의 value 값을 읽어와서 name(const name)에 저장

​

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

-> 웹 페이지에서 "result" id를 가진 element를 찾아오고 innertText 프로퍼티를 사용하여, element의 text 값을 name으로 변경

​

HTML

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

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

​

발생 시키는 이벤트를 'onchange' 이벤트로 변경하여, 사용자가 입력을 완료하고 마우스 커서를 input form 밖으로 이동시켰을 때 값을 읽어와서 화면에 출력