[ JavaScript ] 입력 창의 정보를 읽어 출력하기
2024. 5. 2. 20:49ㆍ· FRONT-END/└ JS
환경 : Visual Studio Code
[ 주요 코드 ] - 입력창에 받은 내용을 p태그로 복사하기
<script type="text/javascript">
function saveContent(){
var inputTarget = document.querySelector("[name=test1]");
var copyTarget = document.querySelector(".copy");
copyTarget.textContent = inputTarget.value;
}
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>입력 태그 제어하기</h1>
</div>
<div class="cell">
<!-- <input name="test1" value="hello" class="tool w-100"> -->
<textarea name="test1" class="tool w-100">hello</textarea>
</div>
<div class="cell">
<button class="btn positive" onclick="saveContent();">
<i class="fa-solid fa-floppy-disk"></i>
저장
</button>
</div>
<div class="cell">
<p class="copy"></p>
</div>
</div>
</body>
</html> (+) var inputTarget = document.querySelector("[name=test1]");
선택자의 태그 명을 생략하여 <input> 태그가 아닌 다른 입력 태그가 들어와도 사용 가능하게 구현.
(+) 입력창(input, select, textarea)의 내용은 value 속성이다
(+) p태그의 내용은 textContent 속성이다
[ 전체 코드 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 예제</title>
<!-- 구글 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<!-- 내가 구현할 스타일 -->
<link rel="stylesheet" type="text/css" href="../css/commons.css">
<link rel="stylesheet" type="text/css" href="../css/test.css">
<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
</style>
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
<script type="text/javascript">
//입력창에 작성된 내용을 p태그로 복사
// - 입력창(input, select, textarea)의 내용은 value 속성이다
// - p태그의 내용은 textContent 속성이다
function saveContent(){
var inputTarget = document.querySelector("[name=test1]");
var copyTarget = document.querySelector(".copy");
copyTarget.textContent = inputTarget.value;
}
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>입력 태그 제어하기</h1>
</div>
<div class="cell">
<!-- <input name="test1" value="hello" class="tool w-100"> -->
<textarea name="test1" class="tool w-100">hello</textarea>
</div>
<div class="cell">
<button class="btn positive" onclick="saveContent();">
<i class="fa-solid fa-floppy-disk"></i>
저장
</button>
</div>
<div class="cell">
<p class="copy"></p>
</div>
</div>
</body>
</html>
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ JS' 카테고리의 다른 글
| [ JavaScript ] style 제어하기 (0) | 2024.05.04 |
|---|---|
| [ JavaScript ] 지하철 요금 계산기 만들기 (0) | 2024.05.03 |
| [ JavaScript ] 두 영역의 내용 교체하기 (0) | 2024.05.01 |
| [ JavaScript ] 전화 키패드 만들어 보기 (태그 제어 이해) (0) | 2024.04.30 |
| [ JavaScript ] 태그 제어 (0) | 2024.04.29 |