<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<button id="koBtn" data-lang="ko">한국</button>
<button id="enBtn" data-lang="en">영어</button>
<p id="title" data-detect="title"></p>
<p id="msg" data-detect="msg"></p>
</body>
</html>
// 다국어 언어 예시.
let multiLanguage = {
"ko" : {
msg : "안녕하세요.",
title: "한국어",
},
"en" : {
msg : "Hello World.",
title: "English",
}
};
window.onload = () => {
let koBtn = document.getElementById("koBtn");
let enBtn = document.getElementById("enBtn");
let setLanguage = (lang) => {
let changeNodeList = Array.prototype.slice.call(document.querySelectorAll('[data-detect]'));
// 각 dataset중 detect인 요소들을 찾아 변경하는 곳.
changeNodeList.map( v => {
v.textContent = multiLanguage[lang][v.dataset.detect]
})
};
koBtn.addEventListener("click" , () => {
setLanguage(koBtn.dataset.lang);
});
enBtn.addEventListener("click" , () => {
setLanguage(enBtn.dataset.lang);
});
};
반응형
'Javascript' 카테고리의 다른 글
| [Javascript] velog에서 사용하는 태그 입력 기능 만들어보기 (0) | 2020.12.13 |
|---|---|
| [JavaScript] 윤년 및 현재시간 , 현재 년월일 소스 (0) | 2019.06.24 |
댓글