いつもお世話になっております。
javascript初心者です。
現在、配列の勉強してますが2次元配列で理解できていない部分があります。
やりたいことはsetInterval関数を使用して2秒間隔でメッセージを出したいです。
配列だとうまく表示されますが、2次元配列にすると上手くできなくなります。
//配列だと上手く表示されるが・・・ var dataArray=["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"];
//2次元配列にすると上手く処理されなくなる var dataArray=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ];
2次元配列から値を取り出して「何らかの処理」をしないといけないところまでは理解できたが、そのあとどういった処理をしたらいいのか分からなく詰まっている状態です。
出来れば最後まで自力で頑張りたいのでワガママ言って申し訳ございませんがヒントという形でご教示いただくことは可能でしょうか。宜しくお願いします。
※私事で申し訳ございませんが、今回に関しては根気強くアドバイスを頂いてるoikashinoaさんにお世話になろうと考えております。多忙の中、回答頂いてることに対してはとても感謝してますが、時間の都合上で割ける時間が限られております。今後、回答頂いても返答できない可能性が高いので予めご了承ください。
//実際のソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> table{ border-collapse:collapse; margin:auto; } td{ border:8px solid lavender; width:500px; height:100px; font-size:60px; color:violet; text-align:center; } </style> <title>リアルタイム処理①</title> </head> <body> <table><tr><td id="msgTBL"></td></tr></table> <script> var MESSAGE=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ]; //msgNoという変数を定義して初期値に0を代入 //msgNOは配列を操作するため使われている var msgNo=0; /** * 2秒ごとに違う文字を表示させる */ function changeMsg(){ //idを指定してテーブルオブジェクトを取得している var screen=document.getElementById("msgTBL"); //MESSAGE変数の[i]番目の値をtextContentを使用して取り出す screen.textContent=MESSAGE[0][1]; //msgNo変数に1をたす(+1) msgNo++; //もし、msgNoの値が等しくなかった時、msgNoは0を返す if(msgNo==4) msgNo=0; } //一定時間の処理を繰り返す為に使用する関数 setInterval(changeMsg,2000); </script> </body> </html>
試したこと①
//試したこと①のソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> table{ border-collapse:collapse; margin:auto; } td{ border:8px solid lavender; width:500px; height:100px; font-size:60px; color:violet; text-align:center; } </style> <title>リアルタイム処理①</title> </head> <body> <table><tr><td id="msgTBL"></td></tr></table> <script> var MESSAGE=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ]; //msgNoという変数を定義して初期値に0を代入 //msgNOは配列を操作するため使われている var msgNo=0; var msgNo2=0; /** * 3秒ごとに違う文字を表示させる */ function changeMsg(){ //idを指定してテーブルオブジェクトを取得している var screen=document.getElementById("msgTBL"); //MESSAGE変数の[i]番目の値をtextContentを使用して取り出す screen.textContent=MESSAGE[msgNo][msgNo2]; //msgNo変数に1をたす(+1) msgNo++; msgNo2++; //もし、msgNoの値が等しくなかった時、msgNoは0を返す if(msgNo==4) msgNo=0; } //一定時間の処理を繰り返す為に使用する関数 setInterval(changeMsg,2000); </script> </body> </html>
試したこと②
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> table{ border-collapse:collapse; margin:auto; } td{ border:8px solid lavender; width:500px; height:100px; font-size:60px; color:violet; text-align:center; } </style> <title>リアルタイム処理①</title> </head> <body> <table><tr><td id="msgTBL"></td></tr></table> <script> var MESSAGE=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ]; //msgNoという変数を定義して初期値に0を代入 //msgNo2変数の初期値を「1」に変更すれば7月分が表示されます。 var msgNo=0; var msgNo2=0; /** * 3秒ごとに違う文字を表示させる */ function changeMsg(){ //idを指定してテーブルオブジェクトを取得している var screen=document.getElementById("msgTBL"); //6/1~6/5を繰り返す処理 msgNo変数の初期値は「0」にする screen.textContent=MESSAGE[magNo][msgNo2]; //7/1~7/5を繰り返す処理 msgNo変数の初期値は「1」にする //screen.textContent=MESSAGE[msgNo][msgNo2]; //msgNo2変数に1をたす(+1) msgNo; msgNo2++; //もし、msgNo2の値が等しくなかった時、msgNo2は0を返す if(msgNo2==5) msgNo2=0; } //一定時間の処理を繰り返す為に使用する関数 setInterval(changeMsg,2000); </script> </body> </html>
試したこと③
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> table{ border-collapse:collpse; margin:auto; } td{ border:8px solid lavender; width:500px; height:100px; font-size:60px; color:violet; text-align:center; } </style> <title>2019/06/01~2019/07/31の日付を2秒ごとに表示</title> </head> <body> <table><tr><td id="msgTBL"></td></tr></table> <script> //2019/06/01~2019/07/31の文字列データを格納している var dateArray=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ]; //dayCount変数を宣言し、初期値に0を代入 var monthCount=0; var dateCount=0; //changeMsg関数を宣言 function changeMsg(){ //idを指定してテーブルオブジェクトを取得 var aaa=document.getElementById("msgTBL"); //テーブルオブジェクト aaa.textContent=dateArray[monthCount][dateCount]; //dayCount変数に1ずつたす(+1) monthCount; dateCount++; //もし、30日に到達したらmonthCountに1をたす処理 if(dateCount==30) { dateCount=0; monthCount=1; //この後の処理がうまくいかない }else if(dateCount==61){ dateCount=0; monthCount=0; } } //setIntervalの中にchangeMsg関数を指定して呼び出す setInterval(changeMsg,2000); </script> </div> </body> </html>
試したこと④
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> table{ border-collapse:collpse; margin:auto; } td{ border:8px solid lavender; width:500px; height:100px; font-size:60px; color:violet; text-align:center; } </style> <title>2019/06/01~2019/07/5の日付を1秒ごとに表示</title> </head> <body> <table><tr><td id="msgTBL"></td></tr></table> <!--////追加--> <input type="button" value="start" onclick="changeMsg()">//// <script> //2019/06/01~2019/07/5の文字列データを格納している var dateArray=[ ["2019/06/01","2019/06/02","2019/06/03","2019/06/04","2019/06/05"], ["2019/07/01","2019/07/02","2019/07/03","2019/07/04","2019/07/05"] ]; //dayCount変数を宣言し、初期値に0を代入 var monthCount=0; var dayCount=0; //changeMsg関数を宣言 function changeMsg(){ //idを指定してテーブルオブジェクトを取得 ////var aaa=document.getElementById("msgTBL"); //テーブルオブジェクト ////aaa.textContent=dateArray[monthCount][dayCount]; console.log(dateArray[monthCount][dayCount]);//// //dayCount変数に1ずつたす(+1) monthCount; dayCount++; //もし、5日に到達したらdayCounに1をたす処理 if(dayCount==5) { dayCount=0; //試しに条件分岐を入れ子の形にしてみました //もし、monthCountが0の場合、1が足される if(monthCount==0){ monthCount=1; }else{ monthCount=0; } } } //setIntervalの中にchangeMsg関数を指定して呼び出す ////setInterval(changeMsg,2000); </script> </div> </body> </html>
回答5件
あなたの回答
tips
プレビュー