質問編集履歴

1

a

2021/12/16 03:08

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,101 +1 @@
1
- ### 前提・実現したいこと
2
-
3
- htmlで、入力フォームに値を入力し「ドルから円」や「円からドル」ボタンを押すと、値をドルや円に変換して表示するプログラムを作成しています。cssで全体を枠で囲うために、<form>タグを<div>タグで囲んだところ、結果が表示されなくなってしまいました。<div>タグがなければ枠は消えますが結果は表示されます。枠と結果の両方を表示できる方法を教えてください。
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
- ### 該当のソースコード
12
-
13
-
14
-
15
- ```html
1
+ 解決しました
16
-
17
- <div id="exchange">
18
-
19
- <form name="exchange" method="post">
20
-
21
- <table>
22
-
23
- <tr>
24
-
25
- <td>値を入力</td>
26
-
27
- <td><input type="number" name="money"></td>
28
-
29
- </tr>
30
-
31
- <tr>
32
-
33
- <td><input type="button" value="ドルから円" onClick="toYen()"></td>
34
-
35
- <td><input type="button" value="円からドル" onClick="toDollar()"></td>
36
-
37
- </tr>
38
-
39
- <tr>
40
-
41
- <td>結果</td>
42
-
43
- <td><output name="result"></output></td>
44
-
45
- </tr>
46
-
47
- </table>
48
-
49
- </form>
50
-
51
- </div>
52
-
53
-
54
-
55
- <script>
56
-
57
- function toYen(){
58
-
59
- var a = exchange.money.value;
60
-
61
- exchange.result.value = a*108.1;
62
-
63
- }
64
-
65
- function toDollar(){
66
-
67
- var a = exchange.money.value;
68
-
69
- exchange.result.value = a*0.0092;
70
-
71
- }
72
-
73
- </script>
74
-
75
-
76
-
77
- <!--以下css-->
78
-
79
- #exchange form{
80
-
81
- padding: 0 1.5em;
82
-
83
- margin: 0 0;
84
-
85
- background-color:#fcd8d8;
86
-
87
- border: dashed 2px #fd84a9;
88
-
89
- color:#000000;
90
-
91
- }
92
-
93
- ```
94
-
95
-
96
-
97
- ![![イメージ説明](e524c09b7fa6ae51f6d1e0de94fa6db3.png)]
98
-
99
-
100
-
101
- ![イメージ説明](8f8862146cf40d7eac26fc9ed07fa71a.png)