はじめに

JavaScriptのinnerHTMLを使用したボタンによる「日⇔英」言語切り替え機能です。
言語に関しては、ブラウザから言語を取得したり、言語によってフォントを指定したりなど、なかなか奥深いのですが、本記事はあくまで、innerHTMLを使用した切り替えボタンに焦点を絞り書いていきます。
また、言語以外の表示切替にも利用できます。

目次

html
JavaScript

1. html

html内の切り替えたいテキストを含む要素（今回はp）にidを指定します。
各言語ボタンに、クリック時にJavaScriptから呼び出す関数名をonclick属性で指定します。
JavaScriptファイルを読み込みます。

index.html

<body>
	<p id="text1">ようこそ！</p><!-- 切り替え対象テキスト -->
	<button onclick="langJa()">日本語</button><!-- 日本語ボタン -->
	<button onclick="langEn()">English</button><!-- 英語ボタン -->
	<script src="lang.js"></script><!-- JavaScriptファイル読み込み -->
</body>

以下のような表示になるかと思います。

2. JavaScript

id="text1"に対して、innerHTMLでボタンクリック時にテキスト内容を書き換えます。

lang.js

// 日本語に切り替え
function langJa(){
	text1.innerHTML = "ようこそ！";
}

// 英語に切り替え
function langEn(){
	text1.innerHTML = "Welcome！";
}

Englishボタンを押すと、以下のようになります。

日本語ボタンを押すと最初の状態に戻ります。

おわりに

今回はinnerHTMLの使い方の一部をとても簡単にまとめました。
innerHTMLについてより深く知りたい方は、下の記事がとても参考になると思います。

【JavaScript】innerHTMLの使い方

【JavaScript】innerHTM、textContentの違い