質問編集履歴

2

追加

2022/06/24 12:30

投稿

misk-ugok
misk-ugok

score0

test CHANGED
File without changes
test CHANGED
@@ -1,2 +1,6 @@
1
1
  ボタンを押すと別ページに移動し、ボタンを押したカウント数まで別ページで表示されるものを作りたいです。
2
+
3
+ レジ袋を押すと、次のページに移動し、今月のレジ袋削減枚数が増える仕組みです。
2
- 自分なりに調べて様々な方法を試ましたがうまくいきませんでした。お手です、教ていだきたです。よろしくお願ます。
4
+ ローカルストレージで保存し、別のPC後日新くレジ袋のボタンを押すとさらに枚数がるものにしたいと考えています。
5
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-24/be594f49-e568-475f-99ab-92e1655e032d.jpeg)
6
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-24/d1719708-2140-4c50-8f1b-3b2081e832fd.jpeg)

1

修正

2022/06/23 05:51

投稿

misk-ugok
misk-ugok

score0

test CHANGED
File without changes
test CHANGED
@@ -1,352 +1,2 @@
1
- ボタンをカウントし、ページに移動し、カウント数表示るものを作りたいです。
1
+ ボタンを押すと別ページに移動し、ボタンを押したカウント数まで別ページで表示されるものを作りたいです。
2
- ボタン「レジ袋(1枚5円)」を押す→次のページ「0枚」がカウントされる
3
-
4
2
  自分なりに調べて様々な方法を試しましたが、うまくいきませんでした。お手数ですが、教えていただきたいです。よろしくお願いします。
5
-
6
- ↓最初のページ(index.html)
7
- ```ここに言語を入力
8
- <!DOCTYPE html>
9
- <html lang="“ja”">
10
- <head>
11
- <meta charset="utf-8" />
12
- <meta name="viewport" content="width=device-width,initial-scale=1" />
13
- <title>1/3</title>
14
- <link rel="stylesheet" href="css/style.css" />
15
- </head>
16
- <body>
17
- <div class="top">
18
- <header><p>レジ袋の選択</p></header>
19
- </div>
20
- <div class="choice">
21
- <button onclick="location.href='index2.html'">
22
- <img src="イラスト/レジ袋.png" title="レジ袋選択" height="350px" />
23
- <p>レジ袋(1枚5円)</p>
24
- </button>
25
- <button onclick="location.href='index3.html'">
26
- <img
27
- src="イラスト/エコバッグ.png"
28
- title="マイバッグ選択"
29
- height="350px"
30
- />
31
- <p>マイバッグまたは袋不要</p>
32
- </button>
33
- </div>
34
-
35
- <footer>
36
- <div class="footer">
37
- <button>戻る</button>
38
- </div>
39
- </footer>
40
- </body>
41
- <script type="text/javascript" src="java/main.js"></script>
42
- </html>
43
-
44
- ```
45
-
46
- ↓index.htmlのデザイン(style.css)
47
- ```ここに言語を入力
48
- body {
49
- font-style: normal;
50
- font-weight: bold;
51
- }
52
- header {
53
- background-color: #ebebeb;
54
- height: 100px;
55
- width: 100%;
56
- position: absolute;
57
- top: 0;
58
- padding-left: 50px;
59
- font-size: 40px;
60
- }
61
- .top p {
62
- margin-top: 25px;
63
- }
64
- footer {
65
- background-color: #ebebeb;
66
- height: 100px;
67
- width: 100%;
68
- position: absolute; /*←絶対位置*/
69
- bottom: 0; /*下に固定*/
70
- padding-left: 50px;
71
- }
72
- .footer button {
73
- border: 2px #39751d solid;
74
- color: #39751d;
75
- font-size: 30px;
76
- margin-top: 15px;
77
- border-radius: 30px;
78
- padding: 10px 30px;
79
- }
80
- .choice {
81
- padding-top: 150px;
82
- padding-left: 50px;
83
- text-align: center;
84
- margin-right: 50px;
85
- }
86
- .choice p {
87
- font-size: 25px;
88
- }
89
- .choice button {
90
- margin-right: 100px;
91
- border-radius: 30px;
92
- padding: 20px 50px;
93
- background-color: #b9dfa6;
94
- }
95
-
96
- ```
97
- ↓index.htmlでボタンを押した後に移動するページ(index2.html)
98
- ```ここに言語を入力
99
- <!DOCTYPE html>
100
- <html lang="“ja”">
101
- <head>
102
- <meta charset="utf-8" />
103
- <meta name="viewport" content="width=device-width,initial-scale=1" />
104
- <title>2/3</title>
105
- <!--CSS-->
106
- <link rel="stylesheet" href="css/style2.css" />
107
- </head>
108
- <body>
109
- <div class="調査">
110
- <div class="レジ袋辞退率">
111
- <h2>当店のレジ袋辞退率</h2>
112
- <section class="bar-graph bar-graph-horizontal bar-graph-one">
113
- <div class="bar-one">
114
- <span class="year">2020</span>
115
- <div class="bar" data-percentage="69.6%"></div>
116
- </div>
117
- <div class="bar-two">
118
- <span class="year">2019</span>
119
- <div class="bar" data-percentage="71%"></div>
120
- </div>
121
- <div class="bar-three">
122
- <span class="year">2018</span>
123
- <div class="bar" data-percentage="74.7%"></div>
124
- </div>
125
- <div class="bar-four">
126
- <span class="year">2017</span>
127
- <div class="bar" data-percentage="76.8%"></div>
128
- </div>
129
- </section>
130
- </div>
131
- <div class="レジ袋削減枚数">
132
- <h2>今月のレジ袋削減枚数</h2>
133
- <p>0枚</p>
134
- </div>
135
- <div>
136
- <h2>今月の二酸化炭素削減量</h2>
137
- </div>
138
- </div>
139
- <footer>
140
- <div class="footer">
141
- <button onclick="location.href='index.html'">戻る</button>
142
- </div>
143
- <div class="footer2">
144
- <button>次へ</button>
145
- </div>
146
- </footer>
147
- </body>
148
-
149
- <script type="text/javascript" src="java/main.js"></script>
150
- <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
151
- </html>
152
-
153
- ```
154
-
155
- ↓index2.htmlのデザイン(style2.css)
156
- ```ここに言語を入力
157
- body {
158
- width: 1350px;
159
- }
160
- .調査 {
161
- width: 1288px;
162
- padding-top: 10px;
163
- padding-left: 50px;
164
- }
165
- footer {
166
- background-color: #ebebeb;
167
- height: 100px;
168
- width: 100%;
169
- position: absolute; /*←絶対位置*/
170
- bottom: 0; /*下に固定*/
171
- padding-left: 50px;
172
- }
173
- .footer button {
174
- border: 2px #39751d solid;
175
- color: #39751d;
176
- font-size: 30px;
177
- margin-top: 15px;
178
- border-radius: 30px;
179
- padding: 10px 30px;
180
- }
181
- .footer2 button {
182
- border: 2px #39751d solid;
183
- background-color: #39751d;
184
- color: white;
185
- font-size: 30px;
186
-
187
- border-radius: 30px;
188
- padding: 10px 30px;
189
- }
190
- .footer2 {
191
- text-align: right;
192
- margin: -70px 100px 0 auto;
193
- }
194
- /* 棒グラフ3 CSS Only */
195
- .bar-graph .year {
196
- -webkit-animation: fade-in-text 2.2s 0.1s forwards;
197
- -moz-animation: fade-in-text 2.2s 0.1s forwards;
198
- animation: fade-in-text 2.2s 0.1s forwards;
199
- opacity: 0;
200
- }
201
-
202
- .bar-graph-horizontal {
203
- max-width: 100%;
204
- }
205
-
206
- .bar-graph-horizontal > div {
207
- float: left;
208
- margin-bottom: 8px;
209
- width: 100%;
210
- }
211
-
212
- .bar-graph-horizontal .year {
213
- float: left;
214
- margin-top: 18px;
215
- width: 50px;
216
- }
217
-
218
- .bar-graph-horizontal .bar {
219
- border-radius: 3px;
220
- height: 55px;
221
- float: left;
222
- overflow: hidden;
223
- position: relative;
224
- width: 0;
225
- }
226
-
227
- .bar-graph-one .bar::after {
228
- -webkit-animation: fade-in-text 2.2s 0.1s forwards;
229
- -moz-animation: fade-in-text 2.2s 0.1s forwards;
230
- animation: fade-in-text 2.2s 0.1s forwards;
231
- color: #fff;
232
- content: attr(data-percentage);
233
- font-weight: 700;
234
- position: absolute;
235
- right: 16px;
236
- top: 12px;
237
- }
238
-
239
- .bar-graph-one .bar-one .bar {
240
- background-color: #c8e4ff;
241
- -webkit-animation: show-bar-one 1.2s 0.1s forwards;
242
- -moz-animation: show-bar-one 1.2s 0.1s forwards;
243
- animation: show-bar-one 1.2s 0.1s forwards;
244
- }
245
-
246
- .bar-graph-one .bar-two .bar {
247
- background-color: #a9d8ff;
248
- -webkit-animation: show-bar-two 1.2s 0.2s forwards;
249
- -moz-animation: show-bar-two 1.2s 0.2s forwards;
250
- animation: show-bar-two 1.2s 0.2s forwards;
251
- }
252
-
253
- .bar-graph-one .bar-three .bar {
254
- background-color: #6bb6ff;
255
- -webkit-animation: show-bar-three 1.2s 0.3s forwards;
256
- -moz-animation: show-bar-three 1.2s 0.3s forwards;
257
- animation: show-bar-three 1.2s 0.3s forwards;
258
- }
259
-
260
- .bar-graph-one .bar-four .bar {
261
- background-color: #59b3fc;
262
- -webkit-animation: show-bar-four 1.2s 0.4s forwards;
263
- -moz-animation: show-bar-four 1.2s 0.4s forwards;
264
- animation: show-bar-four 1.2s 0.4s forwards;
265
- }
266
-
267
- /* Bar Graph Horizontal Animations */
268
- @-webkit-keyframes show-bar-one {
269
- 0% {
270
- width: 0;
271
- }
272
- 100% {
273
- width: 69.6%;
274
- }
275
- }
276
-
277
- @-webkit-keyframes show-bar-two {
278
- 0% {
279
- width: 0;
280
- }
281
- 100% {
282
- width: 71%;
283
- }
284
- }
285
-
286
- @-webkit-keyframes show-bar-three {
287
- 0% {
288
- width: 0;
289
- }
290
- 100% {
291
- width: 74.7%;
292
- }
293
- }
294
-
295
- @-webkit-keyframes show-bar-four {
296
- 0% {
297
- width: 0;
298
- }
299
- 100% {
300
- width: 76.8%;
301
- }
302
- }
303
-
304
- @-webkit-keyframes fade-in-text {
305
- 0% {
306
- opacity: 0;
307
- }
308
- 100% {
309
- opacity: 1;
310
- }
311
- }
312
-
313
- .field {
314
- display: flex;
315
- }
316
-
317
- .inputtext {
318
- color: rgba(43, 32, 32, 0.76);
319
- font-size: 18px;
320
- border-left: 0;
321
- border-right: 0;
322
- width: 80px;
323
- line-height: 3rem;
324
- text-align: center;
325
- border: 1px solid #d7dbdd;
326
- padding: 0 10px;
327
- }
328
-
329
- ```
330
- ↓main.js
331
- ```ここに言語を入力
332
- const storage = localStorage; // ストレージをlocalStorageに設定
333
-
334
- //「月別データ」
335
- var data = [
336
- { label: "1月", y: 65 },
337
- { label: "2月", y: 59 },
338
- { label: "3月", y: 80 },
339
- { label: "4月", y: 81 },
340
- { label: "5月", y: 56 },
341
- { label: "6月", y: 55 },
342
- { label: "7月", y: 48 },
343
- ];
344
-
345
- function count() {
346
- var thisCount = $("#count").html();
347
- thisCount = Number(thisCount);
348
- thisCount = thisCount + 1;
349
- $("#count").html(thisCount);
350
- }
351
-
352
- ```