JavaScript에서 텍스트 필드 작업하기

이제 우리는 사이트 사용자로부터 텍스트를 받는 방법을 배울 것입니다. 이를 위해 HTML에는 데이터 입력을 위한 텍스트 필드를 나타내는 특별한 태그 input가 준비되어 있습니다.

<input>

이 태그에는 페이지에 처음 접속할 때 인풋에 표시될 초기 텍스트를 설정하는 특별한 속성 value가 있습니다:

<input value="text">

우리 사이트 사용자는 페이지에 접속한 후 인풋의 텍스트를 변경할 수 있습니다. 이때, 이 인풋에 대한 참조를 포함하는 변수가 있다면, 그 변수의 value 속성에는 항상 인풋 텍스트의 현재 값이 담기게 됩니다.

실제로 시도해 봅시다. value 속성을 가진 인풋이 있다고 가정합시다:

<input id="elem" value="text">

이 인풋에 대한 참조를 변수에 얻어옵시다:

let elem = document.querySelector('#elem');

이제 인풋의 현재 텍스트를 화면에 출력해 봅시다:

console.log(elem.value);

이제 인풋의 텍스트를 다른 것으로 변경해 봅시다:

elem.value = 'new text';

인풋과 버튼이 주어졌습니다. 버튼을 클릭하면 인풋에 어떤 텍스트든지 작성하세요.

인풋, 문단, 버튼이 주어졌습니다. 버튼을 클릭하면 인풋의 텍스트를 문단에 작성하세요.

두 개의 인풋과 버튼이 주어졌습니다. 첫 번째 인풋에 사용자가 숫자를 입력합니다. 버튼을 클릭하면 입력된 숫자의 제곱을 두 번째 인풋에 작성하세요.

두 개의 인풋과 버튼이 주어졌습니다. 버튼을 클릭하면 첫 번째 인풋에 두 번째 인풋의 값을, 두 번째 인풋에 첫 번째 인풋의 값을 작성하세요. 여러분의 코드는 인풋 값에 관계없이 보편적으로 작동해야 합니다.

5개의 인풋, 문단, 버튼이 주어졌습니다. 인풋에 숫자들이 입력됩니다. 버튼을 클릭하면 입력된 숫자들의 산술 평균을 문단에 작성하세요.