質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

解決済

document.getElementByIdで操作したHTMLのstyle属性がページ再読み込み時に残る問題について

jun9
jun9

総合スコア19

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

1回答

0評価

0クリップ

187閲覧

投稿2022/05/23 15:46

編集2022/05/28 22:12

前提

現在MonacaのクラウドIDEで東京都営バスのバスロケーションアプリを作成しています。

トップページ(top.html)からそれぞれの路線ページ(busRoute.html)に遷移でき、路線ページには現時点のバスの位置、到着予定時刻等が表示されるようしております(document.getElementByIdで該当のバス停のidを指定、DOM操作でバス停の左側のボタンに情報を表示)。そして、setInterval関数を使用し、一定期間で情報が更新されるようにしております。

問題点

しかしながら、一度任意の路線ページを開いたのち、トップページに戻り、再度異なる路線ページを開くと前回開いた路線ぺージの情報(時間、バスの位置)が残ってしまい、一定期間ごとに前回開いたページの情報が表示されてしまいます。

説明が分かりづらいため、下記に画像(①、②)、gifファイル(③)を添付致します。

例)トップページでRH01系統の路線ページを開いたのち、一度トップページに戻り、市01系統の路線ページを開いた場合

【①トップページ】
イメージ説明
【②RH01系統の路線ページに遷移】
イメージ説明
【③一度①トップページに戻り、市01系統の路線ページに遷移】
イメージ説明

該当のソースコード

top.html

<ons-page > <div ng-controller="topCtrl as top"> <ons-toolbar style="background-color:#6699CC"> <div class="left"> <ons-back-button><p></p></ons-back-button> </div> <div class="center"> 路線検索 </div> </ons-toolbar> <div class="list"> <ons-list> <ons-list-item modifier="chevron" class="top" ng-repeat="title in top.title track by $index" > <ons-row> <ons-col ng-click="top.route(title.index)"width="270px" > <div class="number">{{title.number}}</div> <div class="title">{{title.dep}} - {{title.arr}}</div> </ons-col> </ons-row> </ons-list-item> </ons-list> </div> </ons-page>

titleService.js

app.value('titleService',{ title : [ { index:0, number:"RH01", arr:"六本木ヒルズ", dep:"渋谷駅前", routeNote1:"RH01:渋谷駅前→六本木ヒルズ:8403:1", routeNote2:"RH01:六本木ヒルズ→渋谷駅前:8403:2", timeNote1:"RH01:渋谷駅前→六本木ヒルズ:RH01 六本木ヒルズ行:8403:1:09-100", timeNote2:"RH01:六本木ヒルズ→渋谷駅前:RH01 渋谷駅前行:8403:2:09-100", time1:["10:15","10:20","10:22","10:23","10:28",], time2:["08:19","08:22","08:25","08:26","08:28","08:29","08:30","08:34",], }, { index:1, number:"市01", arr:"豊洲市場", dep:"新橋駅前", routeNote1:"市01:新橋駅前→豊洲市場:107:1", routeNote2:"市01:豊洲市場→新橋駅前:107:2", timeNote1:"市01:新橋駅前→豊洲市場:市01 豊洲市場行:107:1:01-105", timeNote2:"市01:豊洲市場→新橋駅前:市01 新橋駅前行:107:2:01-105", time1:["05:18","05:20","05:21","05:22","05:26","05:29","05:30","05:34","05:36","05:44",], time2:["07:18","07:22","07:25","07:30","07:32","07:34","07:38","07:45",], } ] });

busRoute.js

app.controller('topCtrl',function(titleService){ this.title=JSON.parse(JSON.stringify(titleService.title)); this.route=function(val){ myNavigator.pushPage('busRoute.html',{data:this.title[val]}); }; }); app.controller('busRouteCtrl',function($scope, $http){ this.routeNote1=myNavigator.getCurrentPage().options.data.routeNote1; var time=myNavigator.getCurrentPage().options.data.time1;//時間情報 $http.get("https://XXXXX). then(function(response) { $scope.busstop=response.data[0]['odpt:busstopPoleOrder']; });//バス停情報を取得 this.showInfo=function(){ for(var i=0;i<time.length;i++){ document.getElementById(`${i}`).style.backgroundColor='#66CCCC';![![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-24/0e30f962-0bf0-48c1-a828-0c1008c172f3.gif)](https://ddjkaamml8q8x.cloudfront.net/questions/2022-05-24/ab2753ff-ca5f-4894-a414-1f9bc1f7c8e3.gif) document.getElementById(`${i}`).textContent=time[i]+'分'; }; }; setInterval(this.showInfo,5000); });

試したこと

トップページ(top.html)に戻る際にreloadをすれば、前回開いたページの情報が残らず、挙動が正常となりましたが、本質的な解決となっていないため、現在対処法を考えております。

非常に長い期間考えておりますが、解決に至らず、もし分かる方がいらっしゃればと思い、質問させていただきました。

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

実際には、Web APIで動的な路線情報を取得の上、到着時間が一定期間ごとに更新されるよう実装しておりますが、コードが非常に複雑となるため、便宜上省略致しました。

開発プラットフォーム:Monavca
使用言語:JavaScript(Angular JS)

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

itagagaki

2022/05/23 16:39

ブラウザのキャッシュではないのですか?
jun9

2022/05/25 11:16

itagagaki様 お返事ありがとうございます。htmlのmeta要素で<meta http-equiv="Cache-Control" content="no-cache"> を指定しましたが、変化は見られませんでした。おそらくキャッシュではないと思料します。
itagagaki

2022/05/25 12:34

すみません。質問の意味を大体理解しました。 MonacaとかOnsenとかは知らないので見当外れかもしれませんが、ちょっとピンときたことがあります。 setInterval() を使っていますが、clearInterval() をしているところが見当たらないですね。 おそらく、busRoute.js を実行したページからどこかに遷移する際には clearInterval() でインターバルタイマーを停止させてから遷移しないと、インターバルタイマーがゾンビのように残っていて、再度同じページに来た時によみがえってしまっているのでは。
jun9

2022/05/26 12:31

こんばんは。ご指摘のとおり、トップページに戻る際にclearInterval()を設置すれば、よみがえることがなくなりました!いろいろと悩みましたが単純なミスでした。あなたにベストアンサーを差し上げたいのですが質問への追記からはベストアンサーにできません。どういたしましょうか。
itagagaki

2022/05/26 12:34

解決した方法をご自分で回答として書いてこの質問を解決済みにされればよいと思います。 私は推測を書いただけですから別にベストアンサーとかは不要です。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。