質問編集履歴

1

ソースコード貼りました。

2019/05/20 15:13

投稿

keip
keip

スコア33

test CHANGED
File without changes
test CHANGED
@@ -67,3 +67,321 @@
67
67
  イベントハンドラの記述の仕方で挙動が異なるのはどういうことなのでしょうか?
68
68
 
69
69
  よろしくお願いいたします。
70
+
71
+
72
+
73
+ ```HTMLソースコード
74
+
75
+ <!DOCTYPE html>
76
+
77
+ <html>
78
+
79
+ <head>
80
+
81
+ <meta charset="UTF-8">
82
+
83
+ <title>JS勉強</title>
84
+
85
+ <link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
86
+
87
+ <link rel="stylesheet" type="text/css" href="./bootstrap/bootstrap-4.3.1-dist/css/bootstrap.min.css">
88
+
89
+ <script src="../js-jq/jquery-3.4.1.min.js"></script>
90
+
91
+ <script src="../js-jq/myjs.js"></script>
92
+
93
+ </head>
94
+
95
+ <body>
96
+
97
+ <header>
98
+
99
+ <h1>JavaScript</h1>
100
+
101
+ </header>
102
+
103
+ <div id="main" class="container">
104
+
105
+ <div id="area51">
106
+
107
+ <div id="changeable-area">
108
+
109
+ <div id="text-area">
110
+
111
+ <span>something</span>
112
+
113
+ </div>
114
+
115
+ </div>
116
+
117
+ </div>
118
+
119
+ <div id="button-wrapper"><button id="trigger-button">TRIGGER</button></div>
120
+
121
+ <div id="message-area">
122
+
123
+ <span>some messages are written in this area.</span>
124
+
125
+ </div>
126
+
127
+ <p class="button-area"><button id="pic-button">PIC</button></p>
128
+
129
+ <div class="pictures">
130
+
131
+ <img src="../images/test1.jpg">
132
+
133
+ </div>
134
+
135
+ </div>
136
+
137
+ </body>
138
+
139
+ <footer>I'm learning JavaScript.</footer>
140
+
141
+ </html>
142
+
143
+ ```
144
+
145
+
146
+
147
+ ```CSS
148
+
149
+ *{
150
+
151
+ margin:0; padding:0;
152
+
153
+ }
154
+
155
+
156
+
157
+ #pics img{
158
+
159
+ width: 300px;
160
+
161
+ }
162
+
163
+ body{
164
+
165
+ text-align: center;
166
+
167
+ }
168
+
169
+ footer{
170
+
171
+ text-align: center;
172
+
173
+ height: 50px;
174
+
175
+ line-height: 50px;
176
+
177
+ color: whitesmoke;
178
+
179
+ background-color: cornflowerblue;
180
+
181
+ font-weight: bold;
182
+
183
+ margin-top: 15px;
184
+
185
+ }
186
+
187
+ header{
188
+
189
+ height: 60px;
190
+
191
+ color: whitesmoke;
192
+
193
+ background-color: #333333;
194
+
195
+ line-height: 60px;
196
+
197
+ margin-bottom: 15px;
198
+
199
+ }
200
+
201
+ header h1{
202
+
203
+ margin-left: 10px;
204
+
205
+ }
206
+
207
+ #trigger-button{
208
+
209
+ border-radius: 3px;
210
+
211
+ }
212
+
213
+ #area51{}
214
+
215
+
216
+
217
+ #changeable-area{
218
+
219
+ width: 100%;
220
+
221
+ height: 250px;
222
+
223
+ border: solid 1px #333333;
224
+
225
+ margin: 0 auto;
226
+
227
+ font-size: 20px;
228
+
229
+ font-weight: bold;
230
+
231
+ border-radius: 4px;
232
+
233
+ text-align: center;
234
+
235
+ }
236
+
237
+ #text-area{
238
+
239
+ padding: 5px 15px 30px 15px;
240
+
241
+ }
242
+
243
+ #message-area{
244
+
245
+ height: 50px;
246
+
247
+ border: solid 1px #333333;
248
+
249
+ border-radius: 4px;
250
+
251
+ text-align: center;
252
+
253
+ width: 60%;
254
+
255
+ margin: 0 auto;
256
+
257
+ overflow: auto;
258
+
259
+ }
260
+
261
+ #message-area span{
262
+
263
+ font-weight: bold;
264
+
265
+ font-size: 13px;
266
+
267
+ }
268
+
269
+
270
+
271
+ #text-area{
272
+
273
+ height: 250px;
274
+
275
+ word-break: break-all;
276
+
277
+ margin: 0 auto;
278
+
279
+ overflow: auto;
280
+
281
+ }
282
+
283
+ #trigger-button{
284
+
285
+ margin: 0 10px;
286
+
287
+ width: 80px;
288
+
289
+ line-height: 25px;
290
+
291
+ border-radius: 3px;
292
+
293
+ }
294
+
295
+ #button-wrapper{
296
+
297
+ text-align: center;
298
+
299
+ margin: 10px 0;
300
+
301
+ }
302
+
303
+ .pictures{
304
+
305
+ margin: 0 auto;
306
+
307
+ width: 640px;
308
+
309
+ }
310
+
311
+ #pic-button{
312
+
313
+ width: 50px;
314
+
315
+ border-radius: 4px;
316
+
317
+ }
318
+
319
+ .button-area{
320
+
321
+ text-align: center;
322
+
323
+ margin-top: 10px;
324
+
325
+ }
326
+
327
+ ```
328
+
329
+
330
+
331
+ ```JavaScript
332
+
333
+ $(document).ready(function(){
334
+
335
+ function pic_status(){
336
+
337
+ var ma = $("#message-area:first").find("span");
338
+
339
+ if (pic_style === "none"){
340
+
341
+ ma.text("the pic is hidden");
342
+
343
+ }else{
344
+
345
+ ma.text("the pic is shown");
346
+
347
+ }
348
+
349
+ }
350
+
351
+ window.onload = pic_status();
352
+
353
+
354
+
355
+ $("#trigger-button").click(function(){
356
+
357
+ $("#text-area").prepend("<span>a text was created. </span>");
358
+
359
+ })
360
+
361
+
362
+
363
+
364
+
365
+ var pics = $(".pictures");
366
+
367
+ var pb = $("#pic-button");
368
+
369
+ var pic_style;
370
+
371
+ pb.click(function(){
372
+
373
+ pics.toggle();
374
+
375
+ pic_style = pics.css("display");
376
+
377
+ pic_status();
378
+
379
+ })
380
+
381
+
382
+
383
+
384
+
385
+ })
386
+
387
+ ```