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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1387閲覧

Javascript: getElementByIdをクリックした時の処理について

rails_ruby

総合スコア87

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/02/10 04:26

編集2019/02/10 15:41

大変失礼なことをしてしまいすいませんでした。

前提・実現したいこと

下記のボタンをクリックした時に月曜日の全時間帯を - と表示させれたらいいなと思います。
失礼なことをした以上、回答を頂けるとは思いませんがもしそれでもご教授頂けたら幸いです。

該当のソースコード

javscript

1<!-- JS --> 2<script> 3{ 4 const 5 day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'], 6 day_jname = ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'], 7 doc = document; 8 9 const 10 A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))), 11 B = (d, n) => d.setDate (d.getDate () + n), 12 C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''), 13 D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'), 14 E = (e, d) => { 15 let 16 [a,,b] = A (e, 'label', 'br', 'label'), 17 w = d.getDay () ; 18 a.textContent = d.getDate (); 19 b.textContent = day_jname[w]; 20 e.classList.add (day_name[w]); 21 }, 22 F = d => { 23 let m = d.getMonth (); 24 return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 + 25 (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m); 26 }, 27 G = ary => ary.reduce ((a, b) => { 28 let 29 c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b, 30 d = D (c); 31 if (! (d in a)) a[d] = []; 32 a[d][F(c)] = true; 33 return a; 34 }, { }) 35 , 36 H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()), 37 I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':') 38 ; 39 40 41 class Shedule { 42 constructor (date = new Date, range = 7, plan = []) { 43 this.current = H (date); 44 this.date = H (date); 45 this.range = range; 46 this.plan = G (plan); 47 this.table = document.createElement ('table'); 48 49 this.remake (); 50 } 51 52 53 add (day = this.range) { 54 let d = H (this.current); 55 d.setDate (d.getDate () + day); 56 if (+this.date <= +d) { 57 this.current = d; 58 this.remake (); 59 } 60 } 61 62 63 remake () { 64 this.prev_btn = this.next_btn = null; 65 let t = this.table; 66 [...t.childNodes].forEach (e => e.remove ()); 67 68 let 69 h = t.createTHead (), 70 tr0 = h.insertRow (-1), 71 tr1 = h.insertRow (-1), 72 d = H (this.current), 73 s = tr0.insertCell (-1), 74 c = 1, 75 m = d.getMonth (); 76 77 for (let i = 0; i < this.range; i++, c++, B (d, 1)) { 78 let td = tr1.insertCell (-1); 79 if (m !== d.getMonth ()) { 80 s.colSpan = c - 1; 81 s = tr0.insertCell (-1); 82 m = d.getMonth (); 83 c = 1; 84 } 85 s.textContent = C (d); 86 E (td, d); 87 } 88 s.colSpan = c - 1; 89 90 let e = tr0.insertCell (0); 91 e.textContent = '前の一週間'; 92 e.classList.add ('button'); 93 e.rowSpan = 2; 94 this.prev_btn = e; 95 96 e = tr0.insertCell (-1); 97 e.textContent = '次の一週間'; 98 e.classList.add ('button'); 99 e.rowSpan = 2; 100 this.next_btn = e; 101 102 //start--時間の時と分の分割処理 103 var name_start = document.getElementById('sample').value; 104 105 var result = name_start.substr( 0, 2 ); 106 var result2 = name_start.substr( 3, 4 ); 107 108 var hour_start = result, minutes_start = result2; 109 //---end 110 111 //finish 112 var name_finish = document.getElementById('sample2').value; 113 114 var result_finish = name_finish.substr( 0, 2 ); 115 var result2_finish = name_finish.substr( 3, 4 ); 116 117 var hour_end = result_finish, minutes_end = result2_finish; 118 119 //---end 120 let 121 begin = new Date (Date.UTC (1970,0,1, hour_start, minutes_start)),//列のスタート時間 //ここをどうにかしたい。 122 end = new Date (Date.UTC (1970,0,1, hour_end, minutes_end)),//列の終了時間 //ここをどうにかしたい 123 step = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間 124 o = F (this.current), 125 rst = [ ]; 126 127 for (let d = begin; d < end; d = new Date (+step + (+d))) { 128 let 129 a = new Array (this.rangi), 130 b = I (d), 131 c = this.plan[b] || []; 132 133 for (let i = 0; i < this.range; i++) 134 a[i] = c[o + i] ? '-' : '◎'; 135 136 rst.push ([b, ...a, b]); 137 } 138 139 let [tb] = A (t, 'tbody'); 140 rst.forEach (r => { 141 let tr = tb.insertRow (-1); 142 r.forEach (c => tr.insertCell (-1).textContent = c) 143 }); 144 145 } 146 147 handleEvent ({target: t}) { 148 if (t === this.prev_btn) this.add (-this.range); 149 if (t === this.next_btn) this.add (this.range); 150 } 151 152 } 153 154 this.Shedule = Shedule; 155} 156 157 158var today = new Date(); 159var year = today.getFullYear(); 160var month = today.getMonth() + 1; 161var day = today.getDate(); 162var tds = document.querySelectorAll('td'); 163var yobi= new Array("日","月","火","水","木","金","土"); 164document.getElementById('acdn-target').value = year+'年'+month+'月'+ day+'日 '; 165 166 167document.querySelector('#calendar').addEventListener('click', event => { 168 const target = event.target; 169 if (target.nodeName.toLowerCase() !== 'td') { 170 return true; 171 } 172 173 if (!(target.closest('tbody') && 1 <= target.cellIndex && target.cellIndex <= 14)) { 174 return true; 175 } 176 177 const time = target.parentNode.cells[0].textContent; 178 const table = target.closest('table'); 179 const date = table.tHead.rows[1].cells[target.cellIndex - 1].textContent.slice(0,-4); 180 const ymrow = table.tHead.rows[0]; 181 const ym = (target.cellIndex <= ymrow.cells[1].colSpan ? ymrow.cells[1] : ymrow.cells[2]).textContent; 182 document.getElementById('acdn-target').value = ym + date + '日' + time; 183 return true; 184}, false); 185 186</script>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/02/10 04:35

ん? document.getElementById : getElement document.getElementsByClassName : getElements document.getElementsByName : getElements document.getElementsByTagName : getElements s なし → 最初の一つ sあり → 配列で取得 という前提はわかってますか?
kei344

2019/02/10 04:38

「getElementByIdをクリック」とは、エディタ上でクリックするのでしょうか。それとも「getElementById」と書いたボタンでも配置されているのでしょうか。状況がわかりません。
rails_ruby

2019/02/10 04:48

@asahina 1979さん 前提は理解しています。 @kei344さん view画面ではクリックし時の状況を想定しています。 大変分かりにくくて申し訳ございません。定休日table内の二列目のtd(○と×が表示されている列)がクリックできるようになっています。
kei344

2019/02/10 05:23

それであれば「getElementById」は特定のidを付与された要素を探すための関数なので、タイトルおよび本文内の使い方は適切では有りません。修正されることをお勧めします。
rails_ruby

2019/02/10 05:33

「getElementById」では定休日に関するtableのtdをクリックした時にtd内を文字を入れ替えるだけで特に問題が無いかと思うのですが。 カレンダーと定休日のテーブルは分離しているのでUIデザインとしては問題があるかもしれませんが、実現したい処理に対して支障は無いかと思います。
m.ts10806

2019/02/10 05:42

idは画面内にひとつだけ。これは特にJavaScriptにはもろに影響を受けます。でも、例えば月曜日って週には一度ですけど月に何度も出てきますよね? 「特定要素」なのに複数出てきてる状態で、monのみで特定させるのは無理です。 指摘通り「getElementByIdをクリック」できるわけではないです。「クリックイベントが起きたときにその要素がgetElementByIdで取得した要素だったら」というのはできなくはないですが。 使い方や概念が間違っていると話が全く噛み合いません。そこは仕様なのでオレオレ表現はなるべく控えないとまともなアドバイスは得られませんよ。エスパーはいません。
rails_ruby

2019/02/10 06:00

そうなのですね。jsに関して詳しくなく失礼な発言をして申し訳ございませんでした。 それでは、定休日のidはなくgetElementsByClassNameとし、classにすればいいのでしょうか?
退会済みユーザー

退会済みユーザー

2019/02/10 08:58

利用したい(できる)データは何か? それをどう表現したいのか? それをどう操作したいのか? その結果をどう反映させたいのか? 「表現」するプログラムは書いてみたけれど、質問があまりにも散文的で他は理解できない。もうプロに依頼すべきではない?
退会済みユーザー

退会済みユーザー

2019/02/10 09:25

どうにもできないからって、まるっきり別の質問にするのは 上でコメントくださった方々に失礼すぎませんか? to質問者さん
rails_ruby

2019/02/10 09:45

大変申し訳ございませんでした。質問を元に戻させていただきました。
退会済みユーザー

退会済みユーザー

2019/02/10 10:23

td要素を変更できたとして、きっとそれだけで終わりではないでしょ?! エスパーだから先が読める!
rails_ruby

2019/02/10 11:30

正直に言いますと、 ・定休日の設定 ・固定のお昼休みがある場合毎日その時間帯は(ー)にしたい ・定休日ではない日に数時間だけ予定が出来た時にその時間帯だけ(ー)としたいです。 とこの3つを最終的に実現できたらいいなと思いながら技術書と見ながらなんとか実装しようとはしているのですが、思いの外難しくて手こずっている次第です。 そのため、何度も質問させて頂きながらアドバイスやご教示して頂いたコードを元に実装しています。 今回は定休日に関してどうしても実装できそうになかったので質問させて頂きました。
退会済みユーザー

退会済みユーザー

2019/02/10 12:01

根本はそこじゃないんだ! 変更した情報をどこに保存するかだ! 変更した情報を印刷して終わりなら現状でちょっといじるだけなので簡単なのさ! 「送信」とはサーバーに送信するのでしょ?! サーバーに送る情報の書式とか考えないわけ?
rails_ruby

2019/02/10 12:13

railsで実装いるので、railsのヘルパーメソッドのform_forで情報をサーバーに送信しています。 form_forで送信したデータはinput type="hidden" value=<% date(適当) %>でviewに見えない形にしつつ、inputのvalueをjsに渡し、○、ーの判定をさせようかと考えています。 初学者のため、プロの皆さんから見たら適切な方法ではないかもしれませんがそのような形で何とか実装できないかとやっています。
退会済みユーザー

退会済みユーザー

2019/02/10 12:46

小出し小出しで・・・ 正直、疲れました。 休息時間帯やらインターバル時間の設定で、日付はどうやって決めるのですか? 変更があったとき input要素で渡す、value値の書式はどうするのですか? 最初にページを開いたときに、サーバーから受け取る値は? それをもとに表を作るのではないのですか? それと、日付と時間の軸が逆だとまだ作りやすいと思います。 (提示された例で、colspanの設定に興味があったので書いてみました) 送信フォームも提示してくれたほうがまだ作りやすい。 let c = new Schedule (new Date,14,BUSY), {table: d} = c; c.current に表の始まりとなる日付の DateObject が保持されています c.add (n); //c.current がn日移動します c.remake (); で表が書き換えられます なんちゃってオブジェクト指向的なプログラムですが きっと諦めなければ、あなたならできる! それでは、頑張って作ってください。
rails_ruby

2019/02/10 13:01

一応全コードは載せましたが、恐らく高校生の私の力ではまだ意図したものを作れそうにないので何か別な実装方法で考えてみます。 せっかく色々ご教授して頂きましたが私の理解が追いつかないが為に多大なるご迷惑をおかけしてすいませんでした。 コメントにして頂いた記述を回答にしていただければベストアンサーにし、本質問を終わらせて頂きたいので差し支えがなければ回答にコピペしていただけないでしょうか? コメントをしていただいた方々、多大なるご迷惑をおかけして申し訳ございませんでした。
guest

回答1

0

ベストアンサー

「クリックした時の処理について」
質問のタイトルの答えとして、IDを振らなくても値は調べられます。
イベントも個々に行うのではなく、document に1つ設定すれば OKです。

javascript

1<!DOCTYPE html> 2<html lang="ja"> 3<meta charset="utf-8"> 4<style> 5.demo input { position: absolute; width: 3em; text-align: center; } 6table { position:absolute; top: 240px; left: 200px;} 7</style> 8 9<body> 10<div class="demo"></div> 11<table border="1"></table> 12 13 14 15<script> 16const { sin, cos, PI, floor: int } = Math, div = document.querySelector ('div.demo'); 17 18for (i = 0; i < 360; i += 10) { 19 let 20 y = 300 - int (sin (i * PI / 180) * 300), 21 x = 300 + int (cos (i * PI / 180) * 300), 22 inp = document.createElement ('input'); 23 24 inp.style.cssText = `left: ${x}px; top:${y}px; `; 25 inp.value = i; 26 div.appendChild (inp); 27} 28 29//_____________________ 30 31const ary = [ 32 [1,2,3,4,5,6,7,8,9], 33 [11,12,13,14,15,16,17,18,19], 34 [21,22,23,24,25,26,27,28,29], 35 [31,32,33,34,35,36,37,38,39] 36]; 37 38let table = document.querySelector ('table'); 39ary.forEach (function (rows) { 40 rows.forEach (function (cell) { 41 this.insertCell (-1).textContent = cell; 42 }, this.insertRow (-1)); 43}, table); 44 45 46//_____________________ 47 48document.addEventListener ('click', event => { 49 let e = event.target; 50 switch (e.tagName) { 51 case 'INPUT' : 52 alert (e.value); break; 53 case 'TD' : 54 alert (e.textContent); break; 55 } 56}, false); 57</script>

投稿2019/02/10 13:39

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rails_ruby

2019/02/10 13:42

再三ご迷惑おかけしたのにも関わらずありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問