javascript getElementById() 텍스트 가져오기

javascript getElementById() 텍스트 가져오기

안녕하세요.

오늘은 javascript getElementById()를 사용해서 Text값을 가져와보겠습니다.

  • 예제 코드.
  • 실행 결과.

예제 코드.

코드는 아래와 같습니다.

버튼을 누르면 input 태그의 value값을 가져오는 아주 간단한 자바스크립트 코드입니다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      function change() {
        var gett = document.getElementById("dn").value;
        console.log('가져온 텍스트:', gett);
      }
    </script>
    <input id="dn" type="text" value="가져올 텍스트 입니다.">
    <button type="button" onclick="change();">누르면 텍스트를 console에 표시.</button>
  </body>
</html>

실행 결과.

위의 코드를 실행한 결과사진입니다.

html 파일을 열면 아래 사진처럼 간단하게 구성된 사이트가 보입니다.

F12를 눌러 개발자 도구를 열고 button을 눌러 만들어놓은 자바스크립트 함수를 실행합니다.

한번 실행하고 input 태그의 value값을 바꿔 다시 시도해보았습니다.

Designed by JB FACTORY