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

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

ただいまの
回答率

88.22%

javaScript  加算していく

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 876

yoshi.R

score 13

javaScript  ### 数値を加算していく

見にくいコードですみません。

練習でjavaScriptやってます。

javaScriptのコード最後のwindow.onload時に、
forで動的に作ったID(110行目あたり)のついた値(localStrageに保存した値(値は(set_num)数値)を取得して、それを月毎合計値を最終的には 表示したいです。

日にちに保存した数値の合計方法がわかりません。

よろしくお願いします。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="style3.css">
    <script language="javascript" type="text/javascript"></script>
  </head>

  <body>
  <button id="prev" type="button">前の月</button>
  <button id="next" type="button">次の月</button>
  <div id = "calendar"></div>
   <script src="main3.js"></script>
  </body>

</html>
#calendar {
  height: 600px;

  margin: 100px 0px 100px 0px;
}





h2 {
    font-size: 50px;
    text-align: center;
    color: skyblue;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    margin-left: 100px;
    margin-right: 100px;
}

td {
    border: 1px solid #ddd;
    padding: 10px;
    font-size: 40px;
    text-align: center;
}

td:first-child {
    color: red;
}

td:last-child {
    color: royalblue;
}

td.is-disabled {
    color: #ccc;
}


.is-today {
color: red;
}


.item {
  background-color: #8ad3e3b3;
}

button#prev,#next {
  font-size: 60px;
  margin-right: 200px;
  margin-top: 100px;
  text-align: center;
  color: #7a7f8b;
}

input {
  width: 200px;
  height: 60px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 40px;
}


p {
  font-size: 50px;
  margin-left: 80%;
}
const weeks = ['日', '月', '火', '水', '木', '金', '土']
const date = new Date();  //今日の日付
let year = date.getFullYear();
 //console.log(year)
let month = date.getMonth() + 1;  //10(返される値)+1
 //console.log(month)

const config = {
   show: 3,
};




function showCalendar(year, month) {
    for ( i = 0; i < config.show; i++) {

        const calendarHtml = createCalendar(year, month)
        const sec = document.createElement('section')

        sec.innerHTML = calendarHtml
        document.querySelector('#calendar').appendChild(sec)
        month++
        if (month > 12) {
            year++
            month = 1
        } 
    }
};










//---------------------------------------------------------------------
function createCalendar(year, month) {

  const startDate = new Date(year, month - 1, 1)
  const endDate = new Date(year, month,  0) // 月の最後の日を取得
  const endDayCount = endDate.getDate() // 月の末日
  let year1 = date.getFullYear();    
  let now = new Date();
  const todaymonth = now.getMonth() + 1;
  const lastMonthEndDate = new Date(year,month - 1,0)       // 前月の最後の日の情報
  const lastMonthendDayCount = lastMonthEndDate.getDate()   // 前月の末日
  const startDay = startDate.getDay() // 月の最初の日の曜日を取得

    let dayCount = 1 // 日にちのカウント
    let calendarHtml = '' // HTMLを組み立てる変数


    calendarHtml += '<h2>' + year  + '/' + month + '</h2>'



    calendarHtml += '<table id=month_id'+ year + month + '>'+ '<p id=' + year + month + '_sum>' + '合計'  + '</p>' + '<tbody>'



    // 曜日の行を作成
    for (let i = 0; i < weeks.length; i++) {

        calendarHtml += '<td>' + weeks[i] + '</td>'
    };




//ここからカレンダー作成
//---------------------------------------------------------------------
for (let w = 0; w < 6; w++) {

    calendarHtml += '<tr>'

    for (let d = 0; d < 7; d++) {        //0~6まで インクリメント 7日で繰り返す

        if (w == 0 && d < startDay) {    //wが0かつ5より小さいとき空
            // 1行目で1日の曜日の前

         let num = lastMonthendDayCount - startDay + d + 1

            calendarHtml += '<td class="is-disabled">' + num + '</td>'


        } else if (dayCount > endDayCount) {
            // 末尾の日数を超えた


         let num = dayCount - endDayCount
            calendarHtml += '<td class="is-disabled">' + num + '</td>'
            dayCount++

        } else {
                  let   year1 = date.getFullYear();
                  const startDate2 = new Date(year, month - 1, 1)
                  const startDay2 = startDate2.getDay() // 月の最初の日の曜日を取得
                  const todays2 = date.getDate();
                  let   today_month2 = date.getMonth() + 1;
                  let   today_c2 = (6+todays2 + startDay2)

            calendarHtml += `<td id= `+ `"` + year1 + today_month2 + dayCount + `"` + ` ` + `class="calendar_td"` +
             `daylength=${dayCount}>${dayCount}`+
             '<br>'  
             +  '<input id="' + year1 + todaymonth + dayCount +'day_save"' + 'type = "text" name=""  value=""' + ' >' + 
             '<br/> '+
             '<input id="' + year1 + todaymonth + dayCount +'dayoverTime"' + 'type = "number" name="in" step="0.5" value=""' + ' >' + 
             '<br/> '
             +'  <input id="' + year1 + todaymonth + dayCount +'dayoverTime"'+' onclick="load_click(this.id);" class="btn1" type="button" value="読込" onclick="load();"/>'+
             ' <input  id="' + year1 + todaymonth + dayCount +'day"'+' class="btn2" type="button" value="保存" onclick="reply_click(this.id);save()"/>'+
             ' <br/><br/>'+
             ' <button  type="button" class="btn btn-primary btn-block" id="' + year1 + todaymonth + dayCount +'dayoverTime"' + 'onclick="reset_click(this.id);">リセット</button>' + '</td>'
            dayCount++
        }
    }
    calendarHtml += '</tr>'
};

//ここまでカレンダー作成  
//---------------------------------------------------------------------

  const todays = date.getDate();
  let   today_month = date.getMonth() + 1;
  let   today_c = (5+todays+startDay)
  const year_index = '<h2>' + year  + '/' + (month-1) + '</h2>'


 if(year_index == '<h2>' + year  + '/' + today_month + '<h2>' ) {

  let cl = document.getElementsByTagName("td");
      cl[today_c].classList.add('item');
};
//---------------------------------------------------------------------


calendarHtml += '</tbody>' + '</table>'

return calendarHtml //ここまでの処理結果を下のshowCalendarに返す

};
//---------------------------------------------------------------------





function moveCalendar(e) {
    document.querySelector('#calendar').innerHTML = ''

    if (e.target.id === 'prev') {
       month--

        if (month < 1) {
            year--
            month = 12
        }
    }

    if (e.target.id === 'next') {
        month++

        if (month > 12) {
            year++
            month = 1
        }
    }

    showCalendar(year, month)
};






document.querySelector('#prev').addEventListener('click', moveCalendar)
document.querySelector('#next').addEventListener('click', moveCalendar)

showCalendar(year, month);








  window.onload = function (){
      let ret = document.getElementById("month_id"+ year1 +month)
      .getElementsByTagName("td")
      [today_c2].classList.add("item");
 };




  // 保存 id 201911day
  function reply_click(clicked_id)
    {
      //alert(clicked_id);
      let num_day = (clicked_id);

     console.log(num_day);

     save(num_day);

   };



  // 保存
  function save(num_day) {

    let mydata = document.getElementById(num_day+'overTime').value;
    document.getElementById(num_day+'_save').value = mydata
    console.log(mydata);
    localStorage.setItem(num_day+'overTime', mydata);

   };





  // 読込  id 201911dayoverTime
    function load_click(clicked_id){
      //alert(clicked_id);
      let load_data = (clicked_id);
       load(load_data);
   };



    // 読込

    function load(load_data) {
      let memo = 'メモ書きは,';
      let mydata =  "";

   
      if (!localStorage.getItem(load_data)) {
        mydata = "データがありません";
        console.log(`mydata= ${mydata}`);      
      } else {
        mydata = load_data + '=' + localStorage.getItem(load_data);
        console.log(`mydata= ${mydata}`); 
        var str = mydata;
        console.log(str); 

      }
  }





    //リセット

    function reset_click(clicked_id){
        console.log(clicked_id);

      if (!localStorage.getItem(clicked_id)) {
        r_mydata = "データがありません";
        console.log(r_mydata);      
      } else {
        r_mydata = clicked_id + '=' + localStorage.getItem(clicked_id);
        console.log(r_mydata); 
        localStorage.removeItem(clicked_id,r_mydata);
        console.log(clicked_id); 
      }
  }






  window.onload  = function() {
    const date = new Date();  //今日の日付
    const year = date.getFullYear();
    console.log(year)
    const month = date.getMonth() + 1;  //10(返される値)+1
    console.log(month)
    const d = new Date(year, month, 0).getDate();
    console.log(d)

    for (let len = 0; len < d+1; len++){
      var overvalue = (localStorage.getItem(year.toString()+month.toString()+len.toString()+'dayoverTime'));
      var set_num = Number(overvalue);
      }

     const element_sum = document.getElementById('201911_sum');
     element_sum.innerHTML = set_num;

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/11/22 09:06 編集

    >見にくいコード

    インデントきっちり揃えるのと行間を空けすぎないようにする
    くらいで多少読みやすくなると思います。
    同じ階層のコードのインデントが合ってないのはかなり可読性に影響してきます。

    キャンセル

  • azuapricot

    2019/11/22 09:51

    最初のうちって行間空けた方が読みやすいじゃーんと思う人が多いイメージですが
    行間が空きすぎているコードもインデントがそろってないコードなみにはよみにくい・・・

    キャンセル

  • m.ts10806

    2019/11/22 10:48

    azuapricotさん
    「程よさ」って大事ですね。
    道路も広すぎると逆に事故が起きやすくなったりします。

    キャンセル

回答 1

checkベストアンサー

+3

とりあえずこれで動きました。どこが違うか見比べてください。

window.onload = function () {
    const date = new Date();  //今日の日付
    const year = date.getFullYear();
    console.log(year)
    const month = date.getMonth() + 1;  //10(返される値)+1
    console.log(month)
    const d = new Date(year, month, 0).getDate();
    console.log(d)

    let set_num = 0;
    for (let len = 1; len < d + 1; len++) {
        var overvalue = (localStorage.getItem(year.toString() + month.toString() + len.toString() + 'dayoverTime'));
        set_num += Number(overvalue);
    }
    this.console.log(set_num);

    const element_sum = document.getElementById('201912_sum');
    element_sum.innerHTML = set_num;

};

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/22 12:40

    肝心な回答がない人が多い中、的確な回答ありがとうございます。
    thisを学びます。

    キャンセル

  • 2019/11/22 13:01

    いえ、this は私が使っているエディタの補完機能で出てきたものを修正無しで使っているだけで、無くても問題ありません。console.log はデバッグ用なのでこれらは全部外して大丈夫です。

    肝心なところはそこではありませんし、修正依頼で言われていることも大切なことなので、聞き流さないようにしてください。

    キャンセル

  • 2019/11/23 07:37

    もちろんです。
    set_num += Number(overvalue);
    の部分は、自分でもやってみたのですがスペルミスでした。
    ありがとうございます。

    キャンセル

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

  • ただいまの回答率 88.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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