localStorageにデータがある場合のみ「再開」ボタンを表示したい

前提・実現したいこと

Monacaを利用してクイズのアプリを作っています。
クイズを解いていく過程でスコアと何番目まで解いたかlocalStorageに保存されるようにしています。
localStorageにデータがある場合のみ「再開」ボタンを表示したいと考えています。

現状、divのwidthを50％で表示すると並列に2つ並んで表示され、100％にした時は再開ボタンが消えるので条件でwidthを変えられたらと思っています。いろいろ調べてみましたがまだまだ理解がふわふわしているので良い方法がわかりません。他に良い方法があれば教えていただきたいです。

はじめてなので足りないこと等ありましたらお教えください。
よろしくお願いします。

該当のソースコード

index.htmlから一部抜粋

html
1<!--ホーム画面----------------------------------------->
2<template id="home.html">
3  <ons-page>
4            <div style="width: 100%; float: left;">
5            <ons-list>
6            <ons-list-item onclick="fn.load('sp1.html')" tappable>
7              <ons-button modifier="large">初級</ons-button>
8            </ons-list-item>
9            </ons-list>        
10            </div>
11            <div>
12            <ons-list>
13            <ons-list-item onclick="fn.load('sp2.html')" tappable>
14              <ons-button modifier="large">再開</ons-button>
15            </ons-list-item>
16            </ons-list>        
17            </div>
18  </ons-page>
19</template>
20
21<!--解答ページ-------------------------------->
22<template id="sp1.html">
23  <ons-page>
24    <ons-toolbar>
25      <div class="left">
26        <ons-toolbar-button onclick="fn.open()">
27          <ons-icon icon="md-menu" class="icon-red"></ons-icon>
28        </ons-toolbar-button>
29        
30      </div>
31      <div class="right">
32    <ons-fab modifier="mini" class="fab" position="right" direction="left">
33      <ons-icon icon="md-home" onclick="fn.load('home.html')" class="icon-white"></ons-icon>
34    </ons-fab>
35      </div>
36    </ons-toolbar>
37    <iframe src="easy.html" width="100%" height="100%"></iframe>
38  </ons-page>
39</template>
40

easy.htmlの一部抜粋

javascript
1//ローカルストレージへ書き込み
2 if(current ==  questions.length){
3   window.localStorage.removeItem("score");
4   window.localStorage.removeItem("current");
5 }else{
6   window.localStorage.setItem("score" , score);
7   window.localStorage.setItem("current" , current);
8 }

試したこと

http://javascriptist.net/ref/element.style.width.html

ここにあるサンプルコードをやってみようとしたのですが、下記のエラーとなりできませんでした。

Uncaught TypeError: Cannot read property 'style' of null

補足情報（FW/ツールのバージョンなど）

ons-splitterとons-navigatorが相性が悪いようなのでifalmeで問題を表示しています。

データの読み取りについては以下で行えました。

javascript
1    //ローカルストレージから読み取り
2    if(window.localStorage){
3      LocalStorage = Window.LocalStorage;
4      score = parseInt(window.localStorage.getItem("score"));
5      if(!score)score = 0 ;
6      current = parseInt(window.localStorage.getItem("current"));
7      if(!current)current = 0 ;
8    }

kei344

2019/09/07 16:24

「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

tsukuneko2975

2019/09/10 03:16

情報追加依頼ありがとうございます。追記いたしました。

行動規範の内容に同意します

回答2件

ベストアンサー

最終的に、localstrageの値の取得をするJavaScriptを書くことになると思うので、
その際に、localstrageがundefindだったとき、クラスを操作するなりDOMを挿入するなりで、再開ボタンの表示非表示をコントロールする処理をいれればいいと思います。

投稿2019/09/08 05:16

H40831

総合スコア973

tsukuneko2975

2019/09/10 09:50 編集

ご回答ありがとうございます。解決いたしました！

行動規範の内容に同意します

解決いたしました。bodyにonload="widthFunction();"としてとりあえず動くようになりました。

<script type="text/javascript">

if(window.localStorage){
  LocalStorage = Window.LocalStorage;
  current = parseInt(window.localStorage.getItem("current"));
}

function widthFunction() {
  if(!current){
  document.getElementById("sp1").style.width = "100%";
  }else{
  document.getElementById("sp1").style.width = "50%";
  };
｝
</script>

<body onload="widthFunction();">
<template id="home.html">
  <ons-page>
            <div id="sp1" style="width: 100%; float: left;">
            <ons-list>
            <ons-list-item onclick="fn.load('sp1.html')" tappable>
              <ons-button modifier="large">初級</ons-button>
            </ons-list-item>
            </ons-list>        
            </div>
            <div>
            <ons-list>
            <ons-list-item onclick="fn.load('sp2.html')" tappable>
              <ons-button modifier="large">再開</ons-button>
            </ons-list-item>
            </ons-list>        
            </div>
  </ons-page>
</template>
</body>

投稿2019/09/10 09:48

編集2019/09/10 09:53

tsukuneko2975

総合スコア5