[JavaScript] Button For Traditional/Simplified Chinese Conversion on Website

Conversion Button of Traditional/Simplified Chinese on Website via JavaScript.

First we implement button-like element by HTML and SCSS: (Assume default language of website is Traditional Chinese)


<div id="zh-convert" class="zh-convert" data-zh="tw">简体</div>


.zh-convert {
  &:hover {cursor: pointer;}
  float: right;
  margin-right: 3px;

  padding: 5px 5px;
  background: #fff;
  border-radius: 4px;

We need New Tong Wen Tang (GitHub) library to do the conversion for us. Insert the following line in your HTML right before the end of body tag.

<script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_core.js"></script>
<script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_s2t.js"></script>
<script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_t2s.js"></script>
<script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_ps2t.js"></script>
<script language="JavaScript" src="http://tongwen.openfoundry.org/src/web/tongwen_table_pt2s.js"></script>

When users click on 简体, the whole website will be converted to Simplified Chinese. When users click on 繁體, the whole website will be converted to Traditional Chinese.


var zhconvert = document.getElementById("zh-convert");
zhconvert.onclick = function() {
  if (zhconvert.dataset.zh == "tw") {
    zhconvert.dataset.zh = "cn";
    setTimeout(function() {zhconvert.textContent = "繁體";}, 500);
  } else {
    zhconvert.dataset.zh = "tw";
    setTimeout(function() {zhconvert.textContent = "简体";}, 500);


[1]zh_TW to/from zh_CN · twnanda/twnanda@6897761 · GitHub