回答編集履歴

1 修正

mts10806

mts10806 score 29095

2018/06/05 09:21  投稿

現状では
let con = getElementById("container");
としているのでgetElementByIdのエラーが出ますし、
onloadのエラーが出ます。
そもそも最初の切り替え自体も動いてないんじゃないかなと。
まずJavaScriptの記述を下記のように修正し、
```js
let con = document.getElementById("container");
```
jsファイルの読み込み記述
```html
<script type="text/javascript" src="changeStyle.js"></script>
```
</body>の前にすると良いかと。
```html
<script type="text/javascript" src="changeStyle.js"></script>
</body>
```
エレメントのロードよりも[windowのロードをトリガーに](https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload)した方が確実かもしれません。
エレメントのロードよりも[windowのロードをトリガーに](https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload)した方が確実かもしれません。
初期値に前回選択したものが初期選択された方が良いですし、
document.getElementById("mystyle").href が何回も出てくるのはあまりよくありません。
せっかくメソッド準備したのであればそちらも使いたいですね。
上記含めて、少し処理をまとめるとこんな感じで。
```let con = document.getElementById("container");
window.onload = init;
let cssfile = null;
function init(){
   if(localStorage.getItem("cssfile") !== null)
   {
       cssfile = localStorage.getItem("cssfile");
       select = document.getElementsByTagName("select");
       select[0].value = cssfile;
       changeStyle(cssfile);
   }
}
function changeStyle(cssfile){
   document.getElementById("mystyle").href = cssfile;
   localStorage.setItem("cssfile",cssfile);
}   
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る