質問編集履歴

4

.

2019/12/26 06:42

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 自販機を作成しましたが、ボタンが反映せれません… 初心者です
1
+ /自販機を作成しましたが、ボタンが反映せれません… 初心者です
test CHANGED
@@ -1,423 +1,367 @@
1
- ### 前提・実現したいこと
1
+ ### 該当のソースコード
2
-
3
-
4
-
5
- JavaScriptで自販機を作っています。
6
-
7
- ”おつりは~です” などのコードが反映されません。
8
-
9
- またボタンも反映されていません…
10
-
11
- プログラミング自体が初めてなので、丁寧に教えていただけると助かります。
12
-
13
-
14
-
15
-
16
-
17
- ### 発生している問題・エラーメッセージ 2つ
18
2
 
19
3
 
20
4
 
21
5
  ```
22
6
 
23
-
24
-
25
- Error parsing 'integrity' attribute ('sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo='). The digest must be a valid, base64-encoded value.
26
-
27
-
28
-
29
-
30
-
31
- jihannnn.html:1 Error parsing 'integrity' attribute ('sha256CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=').
32
-
33
- The hash algorithm must be one of 'sha256', 'sha384', or 'sha512', followed by a '-' character.
7
+ ```ここに言語を入力
8
+
9
+ <!DOCTYPE html>
10
+
11
+ <html>
12
+
13
+ <head>
14
+
15
+ <meta charset="utf-8">
16
+
17
+ </head>
18
+
19
+
20
+
21
+ <style>
22
+
23
+
24
+
25
+ .center-box{
26
+
27
+ text-align: center;
28
+
29
+ }
30
+
31
+ .large-text{
32
+
33
+ font-size: 2.0rem;
34
+
35
+ }
36
+
37
+
38
+
39
+
40
+
41
+
42
+
43
+ body {
44
+
45
+
46
+
47
+ background-color: #EE0000;
48
+
49
+ text-align: center;
50
+
51
+ margin: 220px 290px 500px 260px;
52
+
53
+ font-size: 24px;
54
+
55
+
56
+
57
+ }
58
+
59
+
60
+
61
+ header {
62
+
63
+
64
+
65
+ }
66
+
67
+
68
+
69
+ main {
70
+
71
+ position:relative;
72
+
73
+ text-align: center;
74
+
75
+ }
76
+
77
+ footer {
78
+
79
+
80
+
81
+ background-color: darkblue;
82
+
83
+ border-bottom:1px solid #444;
84
+
85
+ text-align: center;
86
+
87
+ color: #fff;
88
+
89
+ }
90
+
91
+ h1 {
92
+
93
+ margin: 0;
94
+
95
+ }
96
+
97
+ p {
98
+
99
+ font-size:100%;
100
+
101
+ text-align: center;
102
+
103
+ border-bottom:1px solid #fff;
104
+
105
+ height:100px;
106
+
107
+ }
108
+
109
+ ul {
110
+
111
+ padding: 0;
112
+
113
+
114
+
115
+ border-top: 1px solid #000000;
116
+
117
+ display: table; 定義
118
+
119
+ table-layout: fixed;
120
+
121
+ width: 100%;
122
+
123
+ }
124
+
125
+ li {
126
+
127
+
128
+
129
+ list-style-type:none;*/
130
+
131
+ border: 1px solid #666;*/
132
+
133
+ background-color: #fff;*/
134
+
135
+ display: table-cell; 定義 */
136
+
137
+ cursor: pointer;*/
138
+
139
+
140
+
141
+ }
142
+
143
+ li:hover {
144
+
145
+ background: #0066CC;
146
+
147
+ color:#fff;
148
+
149
+ }
150
+
151
+ button {
152
+
153
+ text-align:center;
154
+
155
+ border-radius: 40px;
156
+
157
+ font-size:100%;
158
+
159
+ background-color: #CCCCCC;
160
+
161
+ height: 80px;
162
+
163
+ color: #fff;
164
+
165
+ }
166
+
167
+
168
+
169
+
170
+
171
+ </style>
172
+
173
+
174
+
175
+
176
+
177
+
178
+
179
+ <body>
180
+
181
+ <button id="りんご">りんご</button>
182
+
183
+ <button id="おれんじ">おれんじ</button>
184
+
185
+ <button id="ぐれーぷ">ぐれーぷ</button>
186
+
187
+ <button id="もも">もも</button>
188
+
189
+
190
+
191
+ <button id="coin10">10円</button>
192
+
193
+ <button id="coin50">50円</button>
194
+
195
+ <button id="coin100">100円</button>
196
+
197
+ <button id="coin500">500円</button>
198
+
199
+
200
+
201
+ <div id="result-div" class="large-text"></div>
202
+
203
+
204
+
205
+
206
+
207
+
208
+
209
+ <script src="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-
210
+
211
+ CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
212
+
213
+
214
+
215
+ <div style="width:500px; height:250px; background:#0099cc;"></div>
216
+
217
+
218
+
219
+
220
+
221
+ <script>
222
+
223
+
224
+
225
+
226
+
227
+ $(function(){
228
+
229
+ "use strict";
230
+
231
+ let total = 0;
232
+
233
+ let price = false;
234
+
235
+
236
+
237
+ $("りんご").on("click",function() {
238
+
239
+ price =120;
240
+
241
+ showprice(price);
242
+
243
+ });
244
+
245
+
246
+
247
+ $("おれんじ").on("click",function() {
248
+
249
+ price =140;
250
+
251
+ showprice(price);
252
+
253
+ });
254
+
255
+
256
+
257
+ $("ぐれーぷ").on("click",function() {
258
+
259
+ price =160;
260
+
261
+ showprice(price);
262
+
263
+ });
264
+
265
+
266
+
267
+ $("もも").on("click",function() {
268
+
269
+ price =210;
270
+
271
+ showprice(price);
272
+
273
+ });
274
+
275
+
276
+
277
+ $("coin10").on("click",function() {
278
+
279
+ pay (10);
280
+
281
+ });
282
+
283
+
284
+
285
+ $("coin50").on("click",function() {
286
+
287
+ pay (50);
288
+
289
+ });
290
+
291
+
292
+
293
+ $("coin100").on("click",function() {
294
+
295
+ pay (100);
296
+
297
+ });
298
+
299
+
300
+
301
+ $("coin500").on("click",function() {
302
+
303
+ pay (500);
304
+
305
+ });
306
+
307
+
308
+
309
+
310
+
311
+
312
+
313
+ function pay(amount){
314
+
315
+ total += amount;
316
+
317
+ if (price == false){
318
+
319
+ total = 0;
320
+
321
+ $("#result-div").html("商品を選んでね");
322
+
323
+ return;
324
+
325
+ } else if (total >= price){
326
+
327
+ $("#result-div").html("ありがとう~おつりは"+(total -price)+"円です。")
328
+
329
+ total = 0;
330
+
331
+ price = false;
332
+
333
+ }else{
334
+
335
+ $("#result-div").html("投入金額"+total);
336
+
337
+ }
338
+
339
+ }
340
+
341
+
342
+
343
+ function showprice (price) {
344
+
345
+
346
+
347
+ $("#result-div").html(price+"円投入してください。")
348
+
349
+
350
+
351
+ }
352
+
353
+
354
+
355
+ });
356
+
357
+
358
+
359
+
360
+
361
+ </script>
362
+
363
+ </body>
364
+
365
+ </html>
34
366
 
35
367
  ```
36
-
37
-
38
-
39
- ### 該当のソースコード
40
-
41
-
42
-
43
- ```
44
-
45
- ```ここに言語を入力
46
-
47
- <!DOCTYPE html>
48
-
49
- <html>
50
-
51
- <head>
52
-
53
- <meta charset="utf-8">
54
-
55
- </head>
56
-
57
-
58
-
59
- <style>
60
-
61
-
62
-
63
- .center-box{
64
-
65
- text-align: center;
66
-
67
- }
68
-
69
- .large-text{
70
-
71
- font-size: 2.0rem;
72
-
73
- }
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
- body {
82
-
83
-
84
-
85
- background-color: #EE0000;
86
-
87
- text-align: center;
88
-
89
- margin: 220px 290px 500px 260px;
90
-
91
- font-size: 24px;
92
-
93
-
94
-
95
- }
96
-
97
-
98
-
99
- header {
100
-
101
-
102
-
103
- }
104
-
105
-
106
-
107
- main {
108
-
109
- position:relative;
110
-
111
- text-align: center;
112
-
113
- }
114
-
115
- footer {
116
-
117
-
118
-
119
- background-color: darkblue;
120
-
121
- border-bottom:1px solid #444;
122
-
123
- text-align: center;
124
-
125
- color: #fff;
126
-
127
- }
128
-
129
- h1 {
130
-
131
- margin: 0;
132
-
133
- }
134
-
135
- p {
136
-
137
- font-size:100%;
138
-
139
- text-align: center;
140
-
141
- border-bottom:1px solid #fff;
142
-
143
- height:100px;
144
-
145
- }
146
-
147
- ul {
148
-
149
- padding: 0;
150
-
151
-
152
-
153
- border-top: 1px solid #000000;
154
-
155
- display: table; 定義
156
-
157
- table-layout: fixed;
158
-
159
- width: 100%;
160
-
161
- }
162
-
163
- li {
164
-
165
-
166
-
167
- list-style-type:none;*/
168
-
169
- border: 1px solid #666;*/
170
-
171
- background-color: #fff;*/
172
-
173
- display: table-cell; 定義 */
174
-
175
- cursor: pointer;*/
176
-
177
-
178
-
179
- }
180
-
181
- li:hover {
182
-
183
- background: #0066CC;
184
-
185
- color:#fff;
186
-
187
- }
188
-
189
- button {
190
-
191
- text-align:center;
192
-
193
- border-radius: 40px;
194
-
195
- font-size:100%;
196
-
197
- background-color: #CCCCCC;
198
-
199
- height: 80px;
200
-
201
- color: #fff;
202
-
203
- }
204
-
205
-
206
-
207
-
208
-
209
- </style>
210
-
211
-
212
-
213
-
214
-
215
-
216
-
217
- <body>
218
-
219
- <button id="りんご">りんご</button>
220
-
221
- <button id="おれんじ">おれんじ</button>
222
-
223
- <button id="ぐれーぷ">ぐれーぷ</button>
224
-
225
- <button id="もも">もも</button>
226
-
227
-
228
-
229
- <button id="coin10">10円</button>
230
-
231
- <button id="coin50">50円</button>
232
-
233
- <button id="coin100">100円</button>
234
-
235
- <button id="coin500">500円</button>
236
-
237
-
238
-
239
- <div id="result-div" class="large-text"></div>
240
-
241
-
242
-
243
-
244
-
245
-
246
-
247
- <script src="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-
248
-
249
- CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
250
-
251
-
252
-
253
- <div style="width:500px; height:250px; background:#0099cc;"></div>
254
-
255
-
256
-
257
-
258
-
259
- <script>
260
-
261
-
262
-
263
-
264
-
265
- $(function(){
266
-
267
- "use strict";
268
-
269
- let total = 0;
270
-
271
- let price = false;
272
-
273
-
274
-
275
- $("りんご").on("click",function() {
276
-
277
- price =120;
278
-
279
- showprice(price);
280
-
281
- });
282
-
283
-
284
-
285
- $("おれんじ").on("click",function() {
286
-
287
- price =140;
288
-
289
- showprice(price);
290
-
291
- });
292
-
293
-
294
-
295
- $("ぐれーぷ").on("click",function() {
296
-
297
- price =160;
298
-
299
- showprice(price);
300
-
301
- });
302
-
303
-
304
-
305
- $("もも").on("click",function() {
306
-
307
- price =210;
308
-
309
- showprice(price);
310
-
311
- });
312
-
313
-
314
-
315
- $("coin10").on("click",function() {
316
-
317
- pay (10);
318
-
319
- });
320
-
321
-
322
-
323
- $("coin50").on("click",function() {
324
-
325
- pay (50);
326
-
327
- });
328
-
329
-
330
-
331
- $("coin100").on("click",function() {
332
-
333
- pay (100);
334
-
335
- });
336
-
337
-
338
-
339
- $("coin500").on("click",function() {
340
-
341
- pay (500);
342
-
343
- });
344
-
345
-
346
-
347
-
348
-
349
-
350
-
351
- function pay(amount){
352
-
353
- total += amount;
354
-
355
- if (price == false){
356
-
357
- total = 0;
358
-
359
- $("#result-div").html("商品を選んでね");
360
-
361
- return;
362
-
363
- } else if (total >= price){
364
-
365
- $("#result-div").html("ありがとう~おつりは"+(total -price)+"円です。")
366
-
367
- total = 0;
368
-
369
- price = false;
370
-
371
- }else{
372
-
373
- $("#result-div").html("投入金額"+total);
374
-
375
- }
376
-
377
- }
378
-
379
-
380
-
381
- function showprice (price) {
382
-
383
-
384
-
385
- $("#result-div").html(price+"円投入してください。")
386
-
387
-
388
-
389
- }
390
-
391
-
392
-
393
- });
394
-
395
-
396
-
397
-
398
-
399
- </script>
400
-
401
- </body>
402
-
403
- </html>
404
-
405
- ```
406
-
407
-
408
-
409
-
410
-
411
- ```
412
-
413
-
414
-
415
- ### 補足情報(FW/ツールのバージョンなど)
416
-
417
-
418
-
419
- javascriptやプログラミング自体が初めてです。
420
-
421
- 初期の初期から理解していないなと自分でも思っています…が自販機を作りたい為
422
-
423
- 丁寧に教えていただけると助かります。よろしくお願いします。

3

編集しました。

2019/12/26 06:42

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
  ```
44
44
 
45
-
45
+ ```ここに言語を入力
46
46
 
47
47
  <!DOCTYPE html>
48
48
 
@@ -402,6 +402,10 @@
402
402
 
403
403
  </html>
404
404
 
405
+ ```
406
+
407
+
408
+
405
409
 
406
410
 
407
411
  ```

2

2019/12/26 05:58

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -42,6 +42,8 @@
42
42
 
43
43
  ```
44
44
 
45
+
46
+
45
47
  <!DOCTYPE html>
46
48
 
47
49
  <html>
@@ -404,8 +406,6 @@
404
406
 
405
407
  ```
406
408
 
407
-
408
-
409
409
 
410
410
 
411
411
  ### 補足情報(FW/ツールのバージョンなど)

1

2019/12/14 04:45

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- Javaで自販機を作っています。
5
+ JavaScriptで自販機を作っています。
6
6
 
7
7
  ”おつりは~です” などのコードが反映されません。
8
8
 
@@ -40,6 +40,8 @@
40
40
 
41
41
 
42
42
 
43
+ ```
44
+
43
45
  <!DOCTYPE html>
44
46
 
45
47
  <html>
@@ -398,7 +400,9 @@
398
400
 
399
401
  </html>
400
402
 
403
+
404
+
401
-
405
+ ```
402
406
 
403
407
 
404
408
 
@@ -408,7 +412,7 @@
408
412
 
409
413
 
410
414
 
411
- java,プログラミング自体が初めてです。
415
+ javascriptやプログラミング自体が初めてです。
412
416
 
413
417
  初期の初期から理解していないなと自分でも思っています…が自販機を作りたい為
414
418