Javascript
Javascript - 다국어 변환
Starters
2020. 9. 16. 17:53
<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>
출처: https://zzdd1558.tistory.com/245 [YunJin_Choi]// 다국어 언어 예시.
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);
});
};
출처: https://zzdd1558.tistory.com/245 [YunJin_Choi]