はじめに
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の違い