質問編集履歴
4
formに action="javascript:void(0)"を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
<body>
|
|
24
24
|
<h1 class="daimei">テストフォーム</h1>
|
|
25
|
-
<form>
|
|
25
|
+
<form action="javascript:void(0)">
|
|
26
26
|
|
|
27
27
|
<div class="1-form-group">
|
|
28
28
|
<select name="gakunen" id="gakunen">
|
3
cng.valueの変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -85,11 +85,11 @@
|
|
|
85
85
|
|
|
86
86
|
|
|
87
87
|
function newFunction() {
|
|
88
|
-
cng.addEventListener(); if (cng.value === "
|
|
88
|
+
cng.addEventListener(); if (cng.value === "H1") {
|
|
89
89
|
cng = "https://aaa.com"
|
|
90
|
-
} else if (cng.value === "
|
|
90
|
+
} else if (cng.value === "H2") {
|
|
91
91
|
cng = "https://bbb.com"
|
|
92
|
-
} else if (cng.value === "
|
|
92
|
+
} else if (cng.value === "H3") {
|
|
93
93
|
cng = "https://ccc.com"
|
|
94
94
|
} else {
|
|
95
95
|
cng = "学年が入力されていません"
|
2
divタグの名前を変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
<h1 class="daimei">テストフォーム</h1>
|
|
25
25
|
<form>
|
|
26
26
|
|
|
27
|
-
<div class="form-group">
|
|
27
|
+
<div class="1-form-group">
|
|
28
28
|
<select name="gakunen" id="gakunen">
|
|
29
29
|
<option value="">学年</option>
|
|
30
30
|
<option value="H1" id="H1">高校1年</option>
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
</select>
|
|
34
34
|
</div>
|
|
35
35
|
|
|
36
|
-
<div class="form-group">
|
|
36
|
+
<div class="2-form-group">
|
|
37
37
|
<select name="class" id="class">
|
|
38
38
|
<option value="">クラス</option>
|
|
39
39
|
<option value="A" id="A">A</option>
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
</select>
|
|
44
44
|
</div>
|
|
45
45
|
|
|
46
|
-
<div class="form-group">
|
|
46
|
+
<div class="3-form-group">
|
|
47
47
|
<select name="number" id="number">
|
|
48
48
|
<option value="">番号</option>
|
|
49
49
|
<option value="1" id="1">1</option>
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
</select>
|
|
60
60
|
</div>
|
|
61
61
|
|
|
62
|
-
<div class="form-group">
|
|
62
|
+
<div class="4-form-group">
|
|
63
63
|
<label for="yourname">氏名（名字と名前は全角で1マス空けてください。）</label>
|
|
64
64
|
<input type="text" id="yourname" name="yourname" placeholder="山田 太郎">
|
|
65
65
|
</div>
|
1
JavaScriptのコードを追加しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
下記のようなフォームを作成しました。
|
|
2
2
|
全ての項目を入力した後、最後にAnswerボタンを押すと、選択した内容と連動した回答（文字）が表示されるようにしたいです。
|
|
3
|
-
具体的に言うと、学年の項目で選択した文字は別の文字に変換して
|
|
3
|
+
具体的に言うと、学年の項目で選択した文字は別の文字に変換して、その他の項目は選択肢の文字をそのまま繋げて表示させたいです。
|
|
4
4
|
例：高校1年A組1番山田太郎の場合、Answerボタンをおすと、
|
|
5
|
-
「ああ
|
|
5
|
+
「https://aaa.comああAいい1うう山田 太郎ええ」
|
|
6
6
|
と表示されるようにしたいです。
|
|
7
|
-
（下記のコードの下の方に書かれているmain.jsは、まだ中身を一切書いておりません。）
|
|
8
|
-
よろしくお願いいたします。
|
|
9
7
|
|
|
8
|
+
【追記】
|
|
9
|
+
JavaScriptコードを書いてみましたが、上手く動作しません。
|
|
10
|
+
htmlのurlタグ部分にurl.innerTextを表示したいのですが、表示されません。
|
|
11
|
+
何かおかしな点がありましたら、教えていただきたいです。
|
|
10
12
|
|
|
11
13
|
```html
|
|
12
14
|
<!DOCTYPE html>
|
|
@@ -42,7 +44,7 @@
|
|
|
42
44
|
</div>
|
|
43
45
|
|
|
44
46
|
<div class="form-group">
|
|
45
|
-
<select name="
|
|
47
|
+
<select name="number" id="number">
|
|
46
48
|
<option value="">番号</option>
|
|
47
49
|
<option value="1" id="1">1</option>
|
|
48
50
|
<option value="2" id="2">2</option>
|
|
@@ -68,8 +70,37 @@
|
|
|
68
70
|
|
|
69
71
|
</form>
|
|
70
72
|
|
|
71
|
-
<
|
|
73
|
+
<p id = "url"></p>
|
|
72
74
|
</body>
|
|
73
75
|
</html>
|
|
74
76
|
|
|
75
77
|
```
|
|
78
|
+
|
|
79
|
+
```javascript
|
|
80
|
+
var cls = document.querySelector("#gakunen")
|
|
81
|
+
var num = document.querySelector("#class")
|
|
82
|
+
var nam = document.querySelector("#number")
|
|
83
|
+
|
|
84
|
+
var cng = document.querySelector("#yourname")
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
function newFunction() {
|
|
88
|
+
cng.addEventListener(); if (cng.value === "高校1年") {
|
|
89
|
+
cng = "https://aaa.com"
|
|
90
|
+
} else if (cng.value === "高校2年") {
|
|
91
|
+
cng = "https://bbb.com"
|
|
92
|
+
} else if (cng.value === "高校3年") {
|
|
93
|
+
cng = "https://ccc.com"
|
|
94
|
+
} else {
|
|
95
|
+
cng = "学年が入力されていません"
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
var url = document.querySelector('#url-submit')
|
|
102
|
+
|
|
103
|
+
url.addEventListener("click", () => {
|
|
104
|
+
url.innerText = cng + "ああ" + cls.value + "いい" + num.value + "うう" + nam.value + "ええ"
|
|
105
|
+
})
|
|
106
|
+
```
|