[ JavaScript ] 두 영역의 내용 교체하기
2024. 5. 1. 19:16ㆍ· FRONT-END/└ JS
환경 : Visual Studio Code
[ 주요 코드 ]
<script type="text/javascript">
function changeContent(){
var area1TitleTraget = document.querySelector(".area1-title");
//console.log(area1TitleTraget);
var area1Title = area1TitleTraget.textContent;//제목 백업
var area2TitleTarget = document.querySelector(".area2-title");
//console.log(area2TitleTarget);
var area2Title = area2TitleTarget.textContent;//제목 백업
var area1ContentTraget = document.querySelector(".area1-content");
var area1Content = area1ContentTraget.textContent;//내용 백업
var area2ContentTarget = document.querySelector(".area2-content");
var area2Content = area2ContentTarget.textContent;//내용 백업
// 교체
area1TitleTraget.textContent = area2Title;
area2TitleTarget.textContent = area1Title;
area1ContentTraget.textContent = area2Content;
area2ContentTarget.textContent = area1Content;
}
</script>(+) 글자를 불러와서 바꿔야 한다 == 글자를 콘솔에 출력할 수 있는가?
(+) 각각의 클래스에 있는 텍스트를 가져와 변수에 저장한 후, 그것을 다른 변수에 저장한다(백업 효과)
(+) 이후 백업한 값들을 교체하여 넣어준 후 출력해주면 된다.
[ 전체 코드 ]
<!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">
function changeContent(){
//글자를 불러와서 바꿔야 한다
// = 글자를 콘솔에 출력할 수 있는가?
var area1TitleTraget = document.querySelector(".area1-title");
//console.log(area1TitleTraget);
var area1Title = area1TitleTraget.textContent;//제목 백업
var area2TitleTarget = document.querySelector(".area2-title");
//console.log(area2TitleTarget);
var area2Title = area2TitleTarget.textContent;//제목 백업
var area1ContentTraget = document.querySelector(".area1-content");
var area1Content = area1ContentTraget.textContent;//내용 백업
var area2ContentTarget = document.querySelector(".area2-content");
var area2Content = area2ContentTarget.textContent;//내용 백업
// 교체
area1TitleTraget.textContent = area2Title;
area2TitleTarget.textContent = area1Title;
area1ContentTraget.textContent = area2Content;
area2ContentTarget.textContent = area1Content;
}
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>내용 바꾸기 문제</h1>
</div>
<div class="cell center">
<h2 class="area1-title">한국어</h2>
</div>
<div class="cell center">
<p class="area1-content">집에 가고 싶다</p>
</div>
<div class="cell center">
<button class="btn positive" onclick="changeContent();">
<i class="fa-solid fa-arrows-rotate"></i>
</button>
</div>
<div class="cell center">
<h2 class="area2-title">english</h2>
</div>
<div class="cell center">
<p class="area2-content">Want to go home</p>
</div>
</div>
</body>
</html>
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ JS' 카테고리의 다른 글
| [ JavaScript ] 지하철 요금 계산기 만들기 (0) | 2024.05.03 |
|---|---|
| [ JavaScript ] 입력 창의 정보를 읽어 출력하기 (0) | 2024.05.02 |
| [ JavaScript ] 전화 키패드 만들어 보기 (태그 제어 이해) (0) | 2024.04.30 |
| [ JavaScript ] 태그 제어 (0) | 2024.04.29 |
| [JavaScript] 함수 호출 기능 (0) | 2024.04.27 |