5日目：プルダウンメニュー

プルダウンメニューで指定ページに飛ぶ

2つのHTMLファイルを用意し、それぞれにプルダウンメニューから飛ぶ方法を記載。
用意するHTML:index.html,index-en.html(違いは日本語と英語のみ)

日本語版のHTMLが下記

<form id ='form'>
  <select name='select'>
    <option value='index.html'>日本語</option>
    <option value='index-en.html'>English</option>
  </select>
  <h2>日本語のページ</h2>
</form>

document.getElementById('form').select.onchange = function(){
  location.href = document.getElementById('form').select.value
}

※プルダウンメニューの場合はoptionではなくその親要素からvalueを読み取る。
locationオブジェクトのhrefプロパティは表示しているページのURLを表すので

  location.href = 新しいURL

とすることで新しいURLを指定できる。

ただしこの場合日本語のページ→英語のページとは移動できるが、プルダウンメニューの初期値が日本語であるため
英語のページに行っても日本語が初期表示になる→onchangeが日本語→日本語には対応していないため
英語から日本語への移動はできない。

そこで、htmlファイルのタグに lang="ja"やlang="en"のタグをつけてあげた上で下記のJSを書くと対応する。

const lang =document.querySelector('html').lang;

if(lang === 'ja'){
  document.querySelector('option[value="index.html"]').selected = true;
}else if(lang === 'en'){
  document.querySelector('option[value="index-en.html"]').selected = true;
}

document.getElementById('form').select.onchange = function(){
  location.href = document.getElementById('form').select.value
}

querySelectorは()内に書かれたセレクタにマッチする要素を取得する。
※複数ある場合は一番上のものを取得する。

なので上記コードの場合、htmlのlangをconst langの中に格納している。
その上で、if文でlangの中身をチェックして、該当する要素にselectedを追加している。