質問編集履歴

3

ソースコードを編集

2022/09/23 08:36

投稿

MUSUBINON
MUSUBINON

score11

test CHANGED
File without changes
test CHANGED
@@ -15,7 +15,29 @@
15
15
  JavaScript
16
16
  ```ここに言語名を入力
17
17
  ソースコード
18
+ <!DOCTYPE html>
19
+ <html lang="ja">
20
+ <head>
21
+ <meta charset="UTF-8">
22
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
23
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
24
+ <title>10日で覚えるJavaScript</title>
25
+ <style>
26
+ table{border: solid 1px orange; border-spacing: 0px;}
27
+ th,td{border: solid 1px orange; padding: 4px;}
28
+ .outer{width: 328px; text-align: center;}
29
+ .prod_list{text-align: center;}
30
+ ul{list-style-type: none; background: gold; padding: 4px;}
31
+ li{text-align: left;}
32
+ [type = "button"],[type = "submit"]{margin: 16px;}
33
+ #basket{width: 300px; margin: auto;}
34
+ .empty_basket{border: dotted 6px darkcyan;
35
+ background: black; padding: 8px;}
36
+ .filled_basket{border: dotted 6px green;
37
+ background: yellow; padding: 8px;}
38
+ </style>
39
+ <script>
18
- window.addEventListener('load',
40
+ window.addEventListener('load',
19
41
  //ページロード時の処理
20
42
  function (event){
21
43
  var elem = document.getElementById('btn_addprod');
@@ -29,6 +51,27 @@
29
51
  , false);
30
52
  }
31
53
  ,false);
54
+ </script>
55
+ </head>
56
+ <body>
57
+ <h1>商品購入フォーム</h1>
58
+ <div class="outer">
59
+ <form>
60
+ <ul class="prod_list">
61
+ <li><input type="radio" name="products" value="none" checked>なし</li>
62
+ <li><input type="radio" name="products" value="none" checked>リラックスチェア</li>
63
+ <li><input type="radio" name="products" value="none" checked>リラックスデスク</li>
64
+ <li><input type="radio" name="products" value="none" checked>ブックスタンド</li>
65
+ </ul>
66
+ <input type="text" id="txt_amount" value="0">個
67
+ <input type="button" id="btn_addprod" value="▼add">
68
+ <div id="basket" class="empty_basket">
69
+ </div>
70
+ <input type="submit" value="購入">
71
+ </form>
72
+ <div>
73
+ </body>
74
+ </html>
32
75
  ### 試したこと
33
76
  window pageLoaded(event)=pageLoaded;とソースコードを入力していれば出来ていたのですが、無名関数の勉強でfunction(event)で入力したら作動しなくなりました。
34
77
 

2

ソースコードの変更

2022/09/23 08:14

投稿

MUSUBINON
MUSUBINON

score11

test CHANGED
File without changes
test CHANGED
@@ -15,20 +15,20 @@
15
15
  JavaScript
16
16
  ```ここに言語名を入力
17
17
  ソースコード
18
- <script>
19
- window.onload = pageLoaded;
18
+ window.addEventListener('load',
20
19
  //ページロード時の処理
21
- function pageLoaded(event){
20
+ function (event){
22
21
  var elem = document.getElementById('btn_addprod');
23
- elem.onclick = addProduct;
22
+ elem.addEventListener = ('click',
24
- }
25
- //btn_addproductクリック時の処理
23
+ //btn_addprodクリック時の処理
26
- function addProduct(event){
24
+ function (event){
27
25
  var elem = document.getElementById('basket');
28
26
  elem.className = 'filled_basket';
29
27
  elem.innerHTML +='<p>商品が入る</p>';
28
+ }
29
+ , false);
30
30
  }
31
- </script>
31
+ ,false);
32
32
  ### 試したこと
33
33
  window pageLoaded(event)=pageLoaded;とソースコードを入力していれば出来ていたのですが、無名関数の勉強でfunction(event)で入力したら作動しなくなりました。
34
34
 

1

ソースコードを編集

2022/09/23 08:10

投稿

MUSUBINON
MUSUBINON

score11

test CHANGED
File without changes
test CHANGED
@@ -15,7 +15,6 @@
15
15
  JavaScript
16
16
  ```ここに言語名を入力
17
17
  ソースコード
18
- ```
19
18
  <script>
20
19
  window.onload = pageLoaded;
21
20
  //ページロード時の処理