Javascript: inputのデータをjavascriptの配列に渡す方法

Question

前提・実現したいこと

簡単な予約システムを作っています。
inputを入力したデータを定数busyに渡したいです。

document.getElementById
```　
それと出来れば上記の三項演算子で×となっている曜日はその曜日の隔週すべて×と表記させる方法を知りたいです。



### 発生している問題・エラーメッセージ
現状では```js```内の配列に書き込むと×マークが表記されるのですが、それをview画面で操作できるようにしたいです。
```html
<!--date-->
<input type="date" value="2019-1-1" id="dates">
<!--start to finish time-->
<input type="time" value="10:00" id="time_start">
<input type="time" value="19:00" id="time_finish">

const BUSY = [
  '2019-02-12T10:00',
  '2019-02-12T10:30',
  '2019-02-13T10:00',
  '2019-02-02T10:00',
  '2019-02-02T10:30',
  '2019-02-03T10:00',
  '2019-02-03T10:30',
  '2019-02-09T10:00',
  '2019-02-09T10:30',
  '2019-02-09T23:30'
];

//monday clicked
document.getElementById("mon").addEventListener( 'click', function( event ) {
    var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
    event.currentTarget.innerText = text;
} );
//tuesday clicked
document.getElementById("tue").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
    event.currentTarget.innerText = text;
} );
//wednesday clicked
document.getElementById("wed").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
    event.currentTarget.innerText = text;
} );
//thursday clicked
document.getElementById("thu").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
    event.currentTarget.innerText = text;
} );
//Friday clicked
document.getElementById("fri").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
    event.currentTarget.innerText = text;
} );
//saturday clicked
document.getElementById("sat").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
    event.currentTarget.innerText = text;
} );
//sunday clicked
document.getElementById("sun").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
    event.currentTarget.innerText = text;
} );

該当のソースコード

<script>
{
  const
    day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
    day_jname = ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
    doc = document;

  const
    A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))),
    B = (d, n) => d.setDate (d.getDate () + n),
    C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''),
    D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'), 
    E = (e, d) => {
      let
        [a,,b] = A (e, 'label', 'br', 'label'),
        w = d.getDay () ;
      a.textContent = d.getDate ();
      b.textContent = day_jname[w];
      e.classList.add (day_name[w]);
    },
    F = d => {
      let m = d.getMonth (); 
      return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
      (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
    },
    G = ary => ary.reduce ((a, b) => {
        let
          c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b,
          d = D (c);
        if (! (d in a)) a[d] = [];
        a[d][F(c)] = true;
        return a;
      }, { })
    ,
    H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()),
    I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':')
    ;


  class Shedule {
    constructor (date = new Date, range = 7, plan = []) {
      this.current = H (date);
      this.date = H (date);
      this.range = range;
      this.plan = G (plan);
      this.table = document.createElement ('table');

      this.remake ();
    }


    add (day = this.range) {
      let d = H (this.current);
      d.setDate (d.getDate () + day);
      if (+this.date <= +d) {
        this.current = d;
        this.remake ();
      }
    }


    remake () {
      this.prev_btn = this.next_btn = null;
      let t = this.table;
      [...t.childNodes].forEach (e => e.remove ());

      let
        h = t.createTHead (),
        tr0 = h.insertRow (-1),
        tr1 = h.insertRow (-1),
        d = H (this.current),
        s = tr0.insertCell (-1),
        c = 1,
        m = d.getMonth ();

      for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
        let td = tr1.insertCell (-1);
        if (m !== d.getMonth ()) {
          s.colSpan = c - 1;
          s = tr0.insertCell (-1);
          m = d.getMonth ();
          c = 1;
        }
        s.textContent = C (d);
        E (td, d);
      }
      s.colSpan = c - 1;

      let e = tr0.insertCell (0);
      e.textContent = '前の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.prev_btn = e;

      e = tr0.insertCell (-1);
      e.textContent = '次の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.next_btn = e;

      //start--時間の時と分の分割処理
      var name_start = document.getElementById('sample').value;
      
      var result = name_start.substr( 0, 2 );
      var result2 = name_start.substr( 3, 4 );
      
      var hour_start = result, minutes_start = result2;
      //---end
      
      //finish
      var name_finish = document.getElementById('sample2').value;
      
      var result_finish = name_finish.substr( 0, 2 );
      var result2_finish = name_finish.substr( 3, 4 );
      
      var hour_end = result_finish, minutes_end = result2_finish;
      
      //---end
      let
        begin = new Date (Date.UTC (1970,0,1, hour_start, minutes_start)),//列のスタート時間 //ここをどうにかしたい。
        end   = new Date (Date.UTC (1970,0,1, hour_end, minutes_end)),//列の終了時間    //ここをどうにかしたい
        step  = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間
        o = F (this.current),
        rst = [ ];

      for (let d = begin; d < end; d = new Date (+step + (+d))) {
        let
          a = new Array (this.rangi),
          b = I (d),
          c = this.plan[b] || [];

        for (let i = 0; i < this.range; i++)
          a[i] = c[o + i] ? '-' : '◎';

        rst.push ([b, ...a, b]);
      }

     let [tb] = A (t, 'tbody');
     rst.forEach (r => {
       let tr = tb.insertRow (-1);
       r.forEach (c => tr.insertCell (-1).textContent = c)
     });            

    }

    handleEvent ({target: t}) {
      if (t === this.prev_btn) this.add (-this.range);
      if (t === this.next_btn) this.add (this.range);
    }

  }

  this.Shedule = Shedule;
}

const BUSY = [
  '2019-02-12T10:00',
  '2019-02-12T10:30',
  '2019-02-13T10:00',
  '2019-02-02T10:00',
  '2019-02-02T10:30',
  '2019-02-03T10:00',
  '2019-02-03T10:30',
  '2019-02-09T10:00',
  '2019-02-09T10:30',
  '2019-02-09T23:30'
];


let a = new Shedule (new Date, 14, BUSY), {table: b} = a;
document.querySelector ('#calendar').appendChild (b);
b.addEventListener ('click', a, false);

/*let c = new Shedule (new Date,7,BUSY), {table: d} = c;
document.querySelector ('#calendar').appendChild (d);
d.addEventListener ('click', c, false);*/

var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
var tds = document.querySelectorAll('td');
var yobi= new Array("日","月","火","水","木","金","土");
document.getElementById('acdn-target').value = year+'年'+month+'月'+ day+'日 '+yobi[day]+'曜日';


document.querySelector('#calendar').addEventListener('click', event => {
  const target = event.target;
  if (target.nodeName.toLowerCase() !== 'td') {
    return true;
  }
  const time = target.parentNode.cells[0].textContent;
  const table = target.closest('table');
  const date = table.tHead.rows[1].cells[target.cellIndex - 1].textContent;
  
  document.getElementById('acdn-target').value = year+'年'+ month + '月' + date + '日' +yobi[day]+'曜日'+ time;
  return true;
}, false);

//monday clicked
document.getElementById("mon").addEventListener( 'click', function( event ) {
	var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
	event.currentTarget.innerText = text;
} );
//tuesday clicked
document.getElementById("tue").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
	event.currentTarget.innerText = text;
} );
//wednesday clicked
document.getElementById("wed").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
	event.currentTarget.innerText = text;
} );
//thursday clicked
document.getElementById("thu").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
	event.currentTarget.innerText = text;
} );
//Friday clicked
document.getElementById("fri").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
	event.currentTarget.innerText = text;
} );
//saturday clicked
document.getElementById("sat").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
	event.currentTarget.innerText = text;
} );
//sunday clicked
document.getElementById("sun").addEventListener( 'click', function( event ) {
  var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○';
	event.currentTarget.innerText = text;
} );

</script>

試したこと

htmlから日時までを取得することができました。

var abc = document.getElementById('off_date').value;
var bcd = document.getElementById('off_start').value;
var cde = document.getElementById('off_finish').value;
console.log(abc + bcd + '~' + cde);//19年02月06日08:00~20:00

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

javascript

Comments

[Lhankor_Mhy]

これ、難読化かけてるなら変換前のコードを張ってほしいのですが……

Answer 1

何を回答すればいいのかわかりません

inputを入力したデータを定数busyに渡したいです。

だけを見れば#datesと#time_startを組み合わせて
BUSYにpushすればよいような気がします。

その後のmon～sunをクリックして何かをしたい部分はどうするのでしょうか？

sample

仮に

<input type="date" value="2019-01-01" id="dates">
<input type="time" value="10:00" id="time_start">
<input type="time" value="19:00" id="time_finish">

というタグを利用して、
'2019-01-01T10:00'から30分お気に'2019-01-01T19:00'までのデータを作り
BUSYに追加すると言うことでよいでしょうか？

<script>
const BUSY = [
  '2019-02-12T10:00',
  '2019-02-12T10:30',
  '2019-02-13T10:00',
  '2019-02-02T10:00',
  '2019-02-02T10:30',
  '2019-02-03T10:00',
  '2019-02-03T10:30',
  '2019-02-09T10:00',
  '2019-02-09T10:30',
  '2019-02-09T23:30'
];
window.addEventListener('DOMContentLoaded', function(){
  document.querySelector('#btn').addEventListener('click',function(){
    var offset=30;
    var d0=document.querySelector('#dates').value;
    var t1=document.querySelector('#time_start').value;
    var t2=document.querySelector('#time_finish').value;
    var d1=new Date(d0+" "+t1);d1.setTime(d1.getTime()+1000*60*60*9);
    var d2=new Date(d0+" "+t2);d2.setTime(d2.getTime()+1000*60*60*9);
    var m=Array((d2.getTime()-d1.getTime())/1000/60/offset+1).fill(null).map(function(x,y){
      return (new Date(d1.getTime()+1000*60*offset*y)).toISOString().substr(0,16);
    });
    [].push.apply(BUSY,m);
    console.log(BUSY);
  });
});
</script>
<input type="date" value="2019-01-01" id="dates"><br>
<input type="time" value="10:00" id="time_start"><br>
<input type="time" value="19:00" id="time_finish"><br>
<input type="button" value="go" id="btn">

Comments

[rails_ruby]

質問に追記したのですが、htmlからvalueを引っ張ってきて変数をbusyの配列に入れるまで出来たのですが
現状ですと、19年02月06日08:00しか×と表示させることができなく、私としては08:00~20:00まで×と表記させたいのですがbusyの配列をどのようにしたら意図した表示が出来るのかについてご教示お願い出来ないでしょうか？

[yambejp]

範囲をつかってBUSYにpushする方法を追記しておきました

[rails_ruby]

ベストアンサー後に再度ご質問させていただくのは、マナー違反かもしれませんがご教示願いたくコメントさせて頂きます。
ご教示していただいたプログラムでは、2019-01-01の日だけ10:00-19:00まで30分おきに配列が生成されていますが、これをfor分を使って同じ処理を1週間行わせたい時にはどのようにすべきかご教示いただけないでしょうか？
私なりに色々試してみたのですが、どうしてもうまくいかず2019-01-01を7回繰り返し処理をしていまいます。どのようにすれば、2019-01-01、2019-01-02、2019-01-03...etcとなるかご教示いただけたら幸いです。

[rails_ruby]

下記に質問を立てていますので、そちらに回答していただけると幸いです。
https://teratail.com/questions/173885

[yambejp]

ご指定の新質問の方に回答しておきました