teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問getElementsByClassNameかquerySelectorAllを使い日付の要素を取得したいです！

編集履歴

質問編集履歴

10

追記削除

2021/04/21 10:01

投稿

yunyun_jp
yunyun_jp

スコア1

test CHANGED
File without changes
test CHANGED
@@ -231,17 +231,3 @@
231
231
  end
232
232
 
233
233
  ```
234
-
235
-
236
-
237
- 追記
238
-
239
- なかなか解決に至らずQiita、スタックオーバーフローへ同様の質問を掲載したしました。
240
-
241
- Qiita
242
-
243
- https://qiita.com/yunyun_engineer/questions/ce2d1db0c7c69caddd77
244
-
245
- スタックオーバーフロー
246
-
247
- https://ja.stackoverflow.com/questions/75353/

9

画像追加、タイトル変更

2021/04/21 10:01

投稿

yunyun_jp
yunyun_jp

スコア1

test CHANGED
@@ -1 +1 @@
1
- トップ画面にすべてのインスタンスで賞味期限の残り日数を表示させたいです！
1
+ getElementsByClassNameかquerySelectorAllを使い日付の要素を取得したいです！
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
-
21
+ ![イメージ説明](9115651b356f315ea649c347967adaaf.png)
22
22
 
23
23
 
24
24
 
@@ -30,17 +30,17 @@
30
30
 
31
31
  window.addEventListener('load', () => {
32
32
 
33
- const purchaseDate = document.getElementById("purchase-date");
33
+ const purchaseInput = document.getElementsByClassName("purchase-date");
34
-
34
+
35
- const expirationDate = document.getElementById("expiration-date");
35
+ const expirationInput = document.getElementsByClassName("expiration-date");
36
-
36
+
37
- const pur = new Date(purchaseDate);
37
+ const purchaseDate = new Date(purchaseInput.innerHTML);
38
-
38
+
39
- const exp = new Date(expirationDate);
39
+ const expirationDate = new Date(expirationInput.innerHTML);
40
-
40
+
41
- const daysLeft = document.getElementById("days-left");
41
+ const daysLeft = document.getElementsByClassName("days-left");
42
-
42
+
43
- daysLeft.innerHTML = (Math.floor( exp.getDate() - pur.getDate() ));
43
+ daysLeft.innerHTML = (Math.floor( (expirationDate.getTime() - purchaseDate.getTime()) / ( 1000 * 60 * 60 * 24 )));
44
44
 
45
45
  });
46
46
 

8

画像削除

2021/04/19 09:02

投稿

yunyun_jp
yunyun_jp

スコア1

test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,13 @@
4
4
 
5
5
  RailsでWebアプリをつくっています。
6
6
 
7
- 購入日と賞味期限をDB上に登録し、その２つのデータの差分で残り日数を表示させましたが、下記の画像の通り最初のコンテンツしか残り日数が表示されません。
7
+ 購入日と賞味期限をDB上に登録し、その２つのデータの差分で残り日数を表示させたいです
8
+
8
-
9
+ 追記
10
+
11
+ getElementByIdメソッドでは最初の要素しか取得されず、getElementsByClassNameメソッドを使いましたが、今度は取得自体ができなくなってしまいました。コンソールで見るとinnerHTMLが使えないみたいです。
12
+
9
- なにかミスがあるのでしょうか？また、JavascriptのDateクラスの貧弱性からくるものでしょうか？
13
+ HTMLcollectionというものでdiv要素は取得できていますが、使えるメソッドが少ないみたいで、日付が取得できるか不明です。
10
14
 
11
15
 
12
16
 
@@ -20,10 +24,6 @@
20
24
 
21
25
 
22
26
 
23
- ![5650d7841a4d507f3176553fa1582b58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143942/b53b5ee4-47d4-1aec-2f65-c76abcdecdd0.png)
24
-
25
-
26
-
27
27
  ### 該当するソースコード
28
28
 
29
29
  ```javascript

7

_をーに変更　記述ミス

2021/04/19 07:43

投稿

yunyun_jp
yunyun_jp

スコア1

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  const purchaseDate = document.getElementById("purchase-date");
34
34
 
35
- const expirationDate = document.getElementById("expiration_date");
35
+ const expirationDate = document.getElementById("expiration-date");
36
36
 
37
37
  const pur = new Date(purchaseDate);
38
38
 

6

質問内容を修正、詳細に記述

2021/04/19 05:52

投稿

yunyun_jp
yunyun_jp

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,12 +1,236 @@
1
- ### 前提・実現したいこと
1
+ ### 解決したいこと
2
-
3
-
4
-
2
+
3
+
4
+
5
- プログラミング初心者です。railsでオリジナルアプリを作成しています。
5
+ RailsでWebアプリをつくっています。
6
-
6
+
7
- 購入日と賞味期限をDB上に登録し、その２つのデータを使って差分で残り日数を表示させましたが、最初のコンテンツしか残り日数が表示されません。
7
+ 購入日と賞味期限をDB上に登録し、その２つのデータの差分で残り日数を表示させましたが、下記の画像の通り最初のコンテンツしか残り日数が表示されません。
8
-
8
+
9
- JavascriptのDateクラスの貧弱性からくるものでしょうか？
9
+ なにかミスがあるのでしょうか？また、JavascriptのDateクラスの貧弱性からくるものでしょうか？
10
+
11
+
12
+
13
+ ### 発生している問題・エラー
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+ ![5650d7841a4d507f3176553fa1582b58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1143942/b53b5ee4-47d4-1aec-2f65-c76abcdecdd0.png)
24
+
25
+
26
+
27
+ ### 該当するソースコード
28
+
29
+ ```javascript
30
+
31
+ window.addEventListener('load', () => {
32
+
33
+ const purchaseDate = document.getElementById("purchase-date");
34
+
35
+ const expirationDate = document.getElementById("expiration_date");
36
+
37
+ const pur = new Date(purchaseDate);
38
+
39
+ const exp = new Date(expirationDate);
40
+
41
+ const daysLeft = document.getElementById("days-left");
42
+
43
+ daysLeft.innerHTML = (Math.floor( exp.getDate() - pur.getDate() ));
44
+
45
+ });
46
+
47
+ ```
48
+
49
+
50
+
51
+
52
+
53
+
54
+
55
+ ```ruby
56
+
57
+ <main class="main">
58
+
59
+ <div class="inner">
60
+
61
+ <div class="card__wrapper">
62
+
63
+ <% @items.each do |item| %>
64
+
65
+ <div class="content">
66
+
67
+ <div class="image-content">
68
+
69
+ <%= link_to image_tag(item.image.variant(resize: '200x200'), class: :card__img ), item_path(item) %>
70
+
71
+ </div>
72
+
73
+ <div class="sub-content">
74
+
75
+ <span>購入日</span>
76
+
77
+ <div id="purchase-date"><%= item.purchase_date %></div>
78
+
79
+ </div>
80
+
81
+ <div class="sub-content">
82
+
83
+ <span>賞味期限</span>
84
+
85
+ <div id="expiration-date"><%= item.expiration_date %></div>
86
+
87
+ </div>
88
+
89
+ <div class="sub-content">
90
+
91
+ <span>残り<span id='days-left'></span>日</span>
92
+
93
+ </div>
94
+
95
+ <div class="nickname-content">
96
+
97
+ <%= link_to "by #{item.user.nickname}", root_path, class: :card__user %>
98
+
99
+ </div>
100
+
101
+ </div>
102
+
103
+ <% end %>
104
+
105
+ </div>
106
+
107
+ </div>
108
+
109
+ </main>
110
+
111
+ ```
112
+
113
+ ```ruby
114
+
115
+ class ItemsController < ApplicationController
116
+
117
+ before_action :authenticate_user!
118
+
119
+ before_action :set_item, only: [:show, :edit, :update, :destroy]
120
+
121
+ before_action :move_to_index, only: [:edit, :update, :destroy]
122
+
123
+
124
+
125
+ def index
126
+
127
+ @items = Item.where(user_id: current_user.id).order("created_at DESC")
128
+
129
+ end
130
+
131
+
132
+
133
+ def new
134
+
135
+ @item = Item.new
136
+
137
+ end
138
+
139
+
140
+
141
+ def create
142
+
143
+ @item = Item.create(item_params)
144
+
145
+ if @item.save
146
+
147
+ redirect_to root_path
148
+
149
+ else
150
+
151
+ render :new
152
+
153
+ end
154
+
155
+ end
156
+
157
+
158
+
159
+ def show
160
+
161
+ end
162
+
163
+
164
+
165
+ def edit
166
+
167
+ end
168
+
169
+
170
+
171
+ def update
172
+
173
+ if @item.update(item_params)
174
+
175
+ redirect_to item_path(@item)
176
+
177
+ else
178
+
179
+ render :edit
180
+
181
+ end
182
+
183
+ end
184
+
185
+
186
+
187
+ def destroy
188
+
189
+ if @item.destroy
190
+
191
+ redirect_to root_path
192
+
193
+ else
194
+
195
+ redirect_to root_path
196
+
197
+ end
198
+
199
+ end
200
+
201
+
202
+
203
+ private
204
+
205
+ def item_params
206
+
207
+ params.require(:item).permit(:name, :quantity, :purchase_date, :expiration_date, :memo, :image).merge(user_id: current_user.id)
208
+
209
+ end
210
+
211
+
212
+
213
+ def set_item
214
+
215
+ @item = Item.find(params[:id])
216
+
217
+ end
218
+
219
+
220
+
221
+ def move_to_index
222
+
223
+ unless current_user == @item.user
224
+
225
+ redirect_to root_path
226
+
227
+ end
228
+
229
+ end
230
+
231
+ end
232
+
233
+ ```
10
234
 
11
235
 
12
236
 
@@ -21,103 +245,3 @@
21
245
  スタックオーバーフロー
22
246
 
23
247
  https://ja.stackoverflow.com/questions/75353/
24
-
25
-
26
-
27
- ### 発生している問題・エラーメッセージ
28
-
29
- ２つの日付を使った残り日数の表示はできましたが、最初のコンテンツ
30
-
31
-
32
-
33
-
34
-
35
- ### 該当のソースコード
36
-
37
- ```
38
-
39
- window.addEventListener('load', () => {
40
-
41
- const purchaseInput = document.getElementById("purchase-date");
42
-
43
- const expirationInput = document.getElementById("expiration-date");
44
-
45
- const purchaseDate = new Date(purchaseInput.innerText);
46
-
47
- const expirationDate = new Date(expirationInput.innerText);
48
-
49
- const daysLeft = document.getElementById("days-left");
50
-
51
- daysLeft.innerHTML = (Math.floor( (expirationDate.getTime() - purchaseDate.getTime()) / ( 1000 * 60 * 60 * 24 )));
52
-
53
- console.log(daysLeft.innerHTML)
54
-
55
- });
56
-
57
- ```
58
-
59
-
60
-
61
- ```Ruby
62
-
63
- <main class="main">
64
-
65
- <div class="inner">
66
-
67
- <div class="card__wrapper">
68
-
69
- <% @items.each do |item| %>
70
-
71
- <div class="content">
72
-
73
- <div class="image-content">
74
-
75
- <%= link_to image_tag(item.image.variant(resize: '200x200'), class: :card__img ), item_path(item) %>
76
-
77
- </div>
78
-
79
- <div class="sub-content">
80
-
81
- <span>購入日</span>
82
-
83
- <div id="purchase-date"><%= item.purchase_date %></div>
84
-
85
- </div>
86
-
87
- <div class="sub-content">
88
-
89
- <span>賞味期限</span>
90
-
91
- <div id="expiration-date"><%= item.expiration_date %></div>
92
-
93
- </div>
94
-
95
- <div class="sub-content">
96
-
97
- <span>残り<span id='days-left'></span>日</span>
98
-
99
- </div>
100
-
101
- <div class="nickname-content">
102
-
103
- <%= link_to "by #{item.user.nickname}", root_path, class: :card__user %>
104
-
105
- </div>
106
-
107
- </div>
108
-
109
- <% end %>
110
-
111
- </div>
112
-
113
- </div>
114
-
115
- </main>
116
-
117
-
118
-
119
- ```ここに言語名を入力
120
-
121
- JavaScript, Ruby, Ruby on rails
122
-
123
- ```

5

質問内容を全体表示させたい旨に変更

2021/04/19 01:20

投稿

yunyun_jp
yunyun_jp

スコア1

test CHANGED
@@ -1 +1 @@
1
- 賞味期限の残り日数を表示させたいです！
1
+ トップ画面にすべてのインスタンスで賞味期限の残り日数を表示させたいです！
test CHANGED
@@ -2,9 +2,11 @@
2
2
 
3
3
 
4
4
 
5
- プログラミング初心者ですrailsでオリジナルアプリを作成しています。
5
+ プログラミング初心者です。railsでオリジナルアプリを作成しています。
6
6
 
7
- 購入日と賞味期限をDB上に登録し、そのデータを使ってJavaScriptで残り日数を表示させたいです。
7
+ 購入日と賞味期限をDB上に登録し、その２つのデータを使って差分で残り日数を表示させましたが、最初のコンテンツしか残り日数が表示されません。
8
+
9
+ JavascriptのDateクラスの貧弱性からくるものでしょうか？
8
10
 
9
11
 
10
12
 
@@ -24,15 +26,11 @@
24
26
 
25
27
  ### 発生している問題・エラーメッセージ
26
28
 
27
- JavaScriptでコードを書いてみましたが、NaNと表示されます。getDateメソッドを使い変換したのですが計算されません。
29
+ ２つの日付を使った残り日数の表示はできましたが、最初のコンテンツ
28
30
 
29
- ```
30
31
 
31
- エラーメッセージ
32
32
 
33
- ```
34
33
 
35
- NaN
36
34
 
37
35
  ### 該当のソースコード
38
36
 
@@ -40,17 +38,19 @@
40
38
 
41
39
  window.addEventListener('load', () => {
42
40
 
43
- const purchaseDate = document.getElementById("purchase-date");
41
+ const purchaseInput = document.getElementById("purchase-date");
44
42
 
45
- const expirationDate = document.getElementById("expiration_date");
43
+ const expirationInput = document.getElementById("expiration-date");
46
44
 
47
- const pur = new Date(purchaseDate);
45
+ const purchaseDate = new Date(purchaseInput.innerText);
48
46
 
49
- const exp = new Date(expirationDate);
47
+ const expirationDate = new Date(expirationInput.innerText);
50
48
 
51
49
  const daysLeft = document.getElementById("days-left");
52
50
 
53
- daysLeft.innerHTML = (Math.floor( exp.getDate（） - pur.getDate（） ));
51
+ daysLeft.innerHTML = (Math.floor( (expirationDate.getTime() - purchaseDate.getTime()) / ( 1000 * 60 * 60 * 24 )));
52
+
53
+ console.log(daysLeft.innerHTML)
54
54
 
55
55
  });
56
56
 
@@ -60,48 +60,64 @@
60
60
 
61
61
  ```Ruby
62
62
 
63
- <div class="card">
63
+ <main class="main">
64
64
 
65
- <%= link_to image_tag(item.image.variant(resize: '200x200'), class: :card__img ), item_path(item) %>
65
+ <div class="inner">
66
66
 
67
- <div class="card__body">
67
+ <div class="card__wrapper">
68
68
 
69
- <%= link_to item.name, root_path, class: :card__title%>
69
+ <% @items.each do |item| %>
70
70
 
71
- <div class="date-content">
71
+ <div class="content">
72
72
 
73
- <span>購入日</span>
73
+ <div class="image-content">
74
74
 
75
- <span id="purchase-date"><%= item.purchase_date %></span>
75
+ <%= link_to image_tag(item.image.variant(resize: '200x200'), class: :card__img ), item_path(item) %>
76
76
 
77
- <div class="date-content">
77
+ </div>
78
78
 
79
- <span>賞味期限</span>
79
+ <div class="sub-content">
80
80
 
81
+ <span>購入日</span>
82
+
83
+ <div id="purchase-date"><%= item.purchase_date %></div>
84
+
85
+ </div>
86
+
87
+ <div class="sub-content">
88
+
89
+ <span>賞味期限</span>
90
+
81
- <span id="expiration_date"><%= item.expiration_date %></span>
91
+ <div id="expiration-date"><%= item.expiration_date %></div>
92
+
93
+ </div>
94
+
95
+ <div class="sub-content">
96
+
97
+ <span>残り<span id='days-left'></span>日</span>
98
+
99
+ </div>
100
+
101
+ <div class="nickname-content">
102
+
103
+ <%= link_to "by #{item.user.nickname}", root_path, class: :card__user %>
104
+
105
+ </div>
106
+
107
+ </div>
108
+
109
+ <% end %>
82
110
 
83
111
  </div>
84
112
 
85
- <div class="date-content">
86
-
87
- <span>
88
-
89
- 残り<span id='days-left'></span>日
90
-
91
- </span>
92
-
93
- </div>
94
-
95
- <%= link_to "by #{item.user.nickname}", root_path, class: :card__user %>
96
-
97
113
  </div>
98
114
 
99
- </div>
115
+ </main>
100
116
 
101
- ```
117
+
102
118
 
103
119
  ```ここに言語名を入力
104
120
 
105
- JavaScript
121
+ JavaScript, Ruby, Ruby on rails
106
122
 
107
123
  ```

4

Qiita, Stack Overflowへの掲載リンク貼りました

2021/04/19 00:58

投稿

yunyun_jp
yunyun_jp

スコア1

test CHANGED
File without changes
test CHANGED
@@ -8,11 +8,23 @@
8
8
 
9
9
 
10
10
 
11
+ 追記
12
+
13
+ なかなか解決に至らずQiita、スタックオーバーフローへ同様の質問を掲載したしました。
14
+
15
+ Qiita
16
+
17
+ https://qiita.com/yunyun_engineer/questions/ce2d1db0c7c69caddd77
18
+
19
+ スタックオーバーフロー
20
+
21
+ https://ja.stackoverflow.com/questions/75353/
22
+
23
+
24
+
11
25
  ### 発生している問題・エラーメッセージ
12
26
 
13
27
  JavaScriptでコードを書いてみましたが、NaNと表示されます。getDateメソッドを使い変換したのですが計算されません。
14
-
15
-
16
28
 
17
29
  ```
18
30
 

3

_item.html.erb追加しました

2021/04/18 09:04

投稿

yunyun_jp
yunyun_jp

スコア1

test CHANGED
File without changes
test CHANGED
@@ -44,6 +44,50 @@
44
44
 
45
45
  ```
46
46
 
47
+
48
+
49
+ ```Ruby
50
+
51
+ <div class="card">
52
+
53
+ <%= link_to image_tag(item.image.variant(resize: '200x200'), class: :card__img ), item_path(item) %>
54
+
55
+ <div class="card__body">
56
+
57
+ <%= link_to item.name, root_path, class: :card__title%>
58
+
59
+ <div class="date-content">
60
+
61
+ <span>購入日</span>
62
+
63
+ <span id="purchase-date"><%= item.purchase_date %></span>
64
+
65
+ <div class="date-content">
66
+
67
+ <span>賞味期限</span>
68
+
69
+ <span id="expiration_date"><%= item.expiration_date %></span>
70
+
71
+ </div>
72
+
73
+ <div class="date-content">
74
+
75
+ <span>
76
+
77
+ 残り<span id='days-left'></span>日
78
+
79
+ </span>
80
+
81
+ </div>
82
+
83
+ <%= link_to "by #{item.user.nickname}", root_path, class: :card__user %>
84
+
85
+ </div>
86
+
87
+ </div>
88
+
89
+ ```
90
+
47
91
  ```ここに言語名を入力
48
92
 
49
93
  JavaScript

2

getDateメソッドを使いましたが変わらずNaNです

2021/04/18 05:21

投稿

yunyun_jp
yunyun_jp

スコア1

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  ### 発生している問題・エラーメッセージ
12
12
 
13
- JavaScriptでコードを書いてみましたが、NaNと表示されます。カラムはdate型で変換しないといけないと思いますが、よくわかりません。またJavaScriptを使わずRubyで処理できるのか知りたいです。
13
+ JavaScriptでコードを書いてみましたが、NaNと表示されます。getDateメソッドを使い変換したのですが計算されません。
14
14
 
15
15
 
16
16
 
@@ -38,7 +38,7 @@
38
38
 
39
39
  const daysLeft = document.getElementById("days-left");
40
40
 
41
- daysLeft.innerHTML = (Math.floor( exp.getDate - pur.getDate ));
41
+ daysLeft.innerHTML = (Math.floor( exp.getDate（） - pur.getDate（） ));
42
42
 
43
43
  });
44
44
 

1

getDateメソッドを使いましたが変わらずNaNです

2021/04/18 05:16

投稿

yunyun_jp
yunyun_jp

スコア1

test CHANGED
File without changes
test CHANGED
@@ -32,13 +32,13 @@
32
32
 
33
33
  const expirationDate = document.getElementById("expiration_date");
34
34
 
35
- const purchaseValue = purchaseDate.value;
35
+ const pur = new Date(purchaseDate);
36
36
 
37
- const expirationValue = expirationDate.value;
37
+ const exp = new Date(expirationDate);
38
38
 
39
39
  const daysLeft = document.getElementById("days-left");
40
40
 
41
- daysLeft.innerHTML = (Math.floor(purchaseValue - expirationValue ));
41
+ daysLeft.innerHTML = (Math.floor( exp.getDate - pur.getDate ));
42
42
 
43
43
  });
44
44