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

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

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

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

HTML

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

Monaca

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

Q&A

解決済

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

jun9
jun9

総合スコア23

AngularJS

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

HTML

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

Monaca

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

1回答

0グッド

0クリップ

445閲覧

投稿2022/05/23 15:46

編集2022/05/24 03:33

前提

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

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

問題点

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

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

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

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

該当のソースコード

top.html

1<ons-page > 2 <div ng-controller="topCtrl as top"> 3 <ons-toolbar style="background-color:#6699CC"> 4 <div class="left"> 5 <ons-back-button><p></p></ons-back-button> 6 </div> 7 <div class="center"> 8 路線検索 9 </div> 10 </ons-toolbar> 11 <div class="list"> 12 <ons-list> 13 <ons-list-item modifier="chevron" class="top" ng-repeat="title in top.title track by $index" > 14 <ons-row> 15 <ons-col ng-click="top.route(title.index)"width="270px" > 16 <div class="number">{{title.number}}</div> 17 <div class="title">{{title.dep}} - {{title.arr}}</div> 18 </ons-col> 19 </ons-row> 20 </ons-list-item> 21 </ons-list> 22 </div> 23</ons-page>

titleService.js

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

busRoute.js

1 2app.controller('topCtrl',function(titleService){ 3 this.title=JSON.parse(JSON.stringify(titleService.title)); 4 this.route=function(val){ 5 myNavigator.pushPage('busRoute.html',{data:this.title[val]}); 6 }; 7}); 8 9app.controller('busRouteCtrl',function($scope, $http){ 10 this.routeNote1=myNavigator.getCurrentPage().options.data.routeNote1; 11 var time=myNavigator.getCurrentPage().options.data.time1;//時間情報 12 $http.get("https://XXXXX). 13 then(function(response) { 14 $scope.busstop=response.data[0]['odpt:busstopPoleOrder']; 15 });//バス停情報を取得 16 17 this.showInfo=function(){ 18 for(var i=0;i<time.length;i++){ 19 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) 20 document.getElementById(`${i}`).textContent=time[i]+'分'; 21 }; 22 }; 23 setInterval(this.showInfo,5000); 24});

試したこと

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

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

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

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

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

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

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

回答1

0

自己解決

setInterval()を設置したものの、clearInterval()をしていなかったため、再度ページを開いた際、前ページのデータがよみがえっていたことがわかりました。トップページへ遷移する際にclearInterval()を設置することで解決できました。

投稿2022/05/28 13:12

jun9

総合スコア23

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

AngularJS

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

HTML

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

Monaca

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