자바스크립트로 input, textarea 값 가져오기와 넘기기

웹 페이지에서 사용자가 입력한 정보를 자바스크립트를 통해 가져오거나 변경하는 것은 웹 개발에서 자주 사용되는 기능입니다. 이 글에서는 자바스크립트를 사용하여 input 및 textarea 요소의 값을 가져오고 넘기는 방법에 대해서 알아보겠습니다.

1. input 값 가져오기

input 요소의 값을 가져오려면 먼저 해당 요소를 선택해야 합니다. 요소를 선택하는 방법 중 가장 일반적인 방법은 getElementById와 querySelector 메서드를 사용하시면 됩니다. 그 후 선택된 요소의 value 속성을 사용하여 값을 가져옵니다.

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>input 값 가져오기</title>
</head>
<body>
     <input type="text" id="fisrtname" placeholder="성을 입력하세요">
     <input type="text" id="lastname" placeholder="이름을 입력하세요">
     <button onclick="getValues()">값 가져오기</button>
     <script>
     function getValues() {
     let inputElementById = document.getElementById("fisrtname");
     let inputElementByQuerySelector = document.querySelector("#lastname");

     console.log("getElementById로 가져온 값:", inputElementById.value);
     console.log("querySelector로 가져온 값:", inputElementByQuerySelector.value);
     }
     </script>
</body>
</html>

2. 실행 결과 화면

2. textarea 값 가져오기

textarea 요소의 값을 가져오는 방법은 input 요소와 거의 동일합니다. 요소를 선택하고 value 속성을 사용하여 값을 가져옵니다.

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>textarea 값 가져오기</title>
</head>
<body>
     <textarea id="message" cols="50" rows="5" placeholder="메시지를 입력하세요"></textarea>
     <button onclick="getValue()">값 가져오기</button>

     <script>
     function getValue() {
     let textareaElement = document.getElementById("message");
     console.log(textareaElement.value);
     }
     </script>
</body>
</html>

2. 실행 결과 화면

3. input, textarea 값 넘기기

값을 넘기기 위해서는 선택한 요소의 value 속성에 새 값을 할당하면 됩니다.

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>input, textarea 값 넘기기</title>
     <style>
     input, textarea {margin-bottom: 10px;}
     </style>
</head>
<body>
     <input type="text" id="username" placeholder="이름을 입력하세요">
     <textarea id="message" cols="50" rows="5" placeholder="메시지를 입력하세요"></textarea>
     <button onclick="setValue()">값 넘기기</button>

     <script>
     function setValue() {
     let inputElement = document.getElementById("username");
     let textareaElement = document.getElementById("message");

     inputElement.value = "BlueShare";
     textareaElement.value = "BlueShare 블로그에 방문해 주셔서 감사합니다.";
     }
     </script>
</body>
</html>

2. 실행 결과 화면

함께 보면 좋은 게시글

이 글이 도움이 되셨다면 공유 부탁 드립니다.

자바스크립트로 input, textarea 값 가져오기와 넘기기

1. input 값 가져오기

2. textarea 값 가져오기

3. input, textarea 값 넘기기

함께 보면 좋은 게시글

동일 카테고리 게시글