【Javascript】選択肢に応じた回答を表示したい

下記のようなフォームを作成しました。
全ての項目を入力した後、最後にAnswerボタンを押すと、選択した内容と連動した回答（文字）が表示されるようにしたいです。
具体的に言うと、学年の項目で選択した文字は別の文字に変換して、その他の項目は選択肢の文字をそのまま繋げて表示させたいです。
例：高校1年A組1番山田太郎の場合、Answerボタンをおすと、
「https://aaa.comああAいい1うう山田　太郎ええ」
と表示されるようにしたいです。

【追記】
JavaScriptコードを書いてみましたが、上手く動作しません。
htmlのurlタグ部分にurl.innerTextを表示したいのですが、表示されません。
何かおかしな点がありましたら、教えていただきたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>テスト</title>
7 
8</head>
9 
10<body>
11    <h1 class="daimei">テストフォーム</h1>
12    <form action="javascript:void(0)">
13 
14        <div class="1-form-group">
15        <select name="gakunen" id="gakunen">
16            <option value="">学年</option>
17            <option value="H1" id="H1">高校1年</option>
18            <option value="H2" id="H2">高校2年</option>
19            <option value="H3" id="H3">高校3年</option>
20        </select>
21        </div>
22 
23        <div class="2-form-group">
24        <select name="class" id="class">
25            <option value="">クラス</option>
26            <option value="A" id="A">A</option>
27            <option value="B" id="B">B</option>
28            <option value="C" id="C">C</option>
29            <option value="D" id="D">D</option>
30        </select>
31        </div>
32 
33        <div class="3-form-group">
34        <select name="number" id="number">
35            <option value="">番号</option>
36            <option value="1" id="1">1</option>
37            <option value="2" id="2">2</option>
38            <option value="3" id="3">3</option>
39            <option value="4" id="4">4</option>
40            <option value="5" id="5">5</option>
41            <option value="6" id="6">6</option>
42            <option value="7" id="7">7</option>
43            <option value="8" id="8">8</option>
44            <option value="9" id="9">9</option>
45            <option value="10" id="10">10</option>
46        </select>
47        </div>
48 
49        <div class="4-form-group">
50        <label for="yourname">氏名（名字と名前は全角で1マス空けてください。）</label>
51        <input type="text" id="yourname" name="yourname" placeholder="山田　太郎">
52        </div>
53 
54        <div class="btn-area">
55            <input id = "url-submit" type="submit" value="Answer"><input type="reset" value="リセット">
56        </div>
57 
58    </form>
59 
60    <p id = "url"></p>
61</body>
62</html>
63

javascript
1var cls = document.querySelector("#gakunen")
2var num = document.querySelector("#class")
3var nam = document.querySelector("#number")
4
5var cng = document.querySelector("#yourname")
6
7
8function newFunction() {
9cng.addEventListener(); if (cng.value === "H1") {
10cng = "https://aaa.com"
11} else if (cng.value === "H2") {
12cng = "https://bbb.com"
13} else if (cng.value === "H3") {
14cng = "https://ccc.com"
15} else {
16cng = "学年が入力されていません"
17}
18}
19
20
21
22var url = document.querySelector('#url-submit')
23
24url.addEventListener("click", () => {
25url.innerText = cng + "ああ" + cls.value + "いい" + num.value + "うう" + nam.value + "ええ"
26})

m.ts10806

2022/04/21 23:04

現状の問題、質問は何でしょう。見た感じ作業依頼にも取れますが・・

Zuishin

2022/04/21 23:35 編集

あなたの作ろうとしている物は、作っても世の中のために一切役に立たないものです。作らなくて大丈夫です。それを作る過程であなたの教育に役立つという、ただそれだけのものなので、不要であるなら無駄な時間を使わず、白紙で提出したらいいでしょう。

Y----Y

2022/04/24 10:21

ご指摘ありがとうございます。まったく何から書き始めれば良いか分からなかったため、このような投げやりな質問となってしまいました。どのような種類のコードを使えばいいのか等、抽象的な回答で全然構いませんでした。その点を書いておくべきでした。作業依頼といった意図は一切ありません。申し訳ございませんでした。

m.ts10806

2022/04/24 21:02

質問は編集できるので、そのような誤解を与えないように取り組んだことをきちんと記載してください。何かしら調べたり試したりしたと思います。

m.ts10806

2022/04/24 21:45

newFunction() がどこからも呼ばれてませんね。

行動規範の内容に同意します

回答1件

ベストアンサー

javascriptのeventlistnerとdocument.querySelector()を使用すればよいと思います。

submitタグにボタンが押されたら必要な値(エレメント/タグ)をdocument.querySelector()で取得して.valueで中身を取り出し、それぞれを変換又は結合して表示するeventlistnerを書きます。
表示に関しては新しくdocument.createElement()等でエレメントを作成してどこかに挿入するのもありますが、あらかじめなにも記述していないタグなどを作成して、このエレメントを取得、上記のイベントで取得/生成した文字列をtextとして入れると実現できると思います。

それぞれの使い方などは調べれば出てくると思います。

投稿2022/04/22 00:07

Yuu

総合スコア673

Y----Y

2022/04/24 10:09 編集

回答ありがとうございます。自分なりに調べて、以下のJavascriptコードを書きましたが、上手く動作しません。 htmlコードにタグを追加しましたが、表示したい文字（学年から変換した文字＋ああ＋クラス＋いい＋番号＋うう＋名前＋ええ）が表示されません。どこかおかしい箇所がありましたら指摘して頂きたいです。 var cls = document.querySelector("#gakunen") var num = document.querySelector("#class") var nam = document.querySelector("#number") var cng = document.querySelector("#yourname") function newFunction() { cng.addEventListener(); if (cng.value === "高校1年") { cng = "https://aaa.com" } else if (cng.value === "高校2年") { cng = "https://bbb.com" } else if (cng.value === "高校3年") { cng = "https://ccc.com" } else { cng = "学年が入力されていません" } } var url = document.querySelector('#url-submit') url.addEventListener("click", () => { url.innerText = cng + "ああ" + cls.value + "いい" + num.value + "うう" + nam.value + "ええ" })

Yuu

2022/04/25 00:56

頂いたソースコードをベースに、自分なりに修正させてもらいました。いくつか変更点があるので、以下に書きます。 1. function newFunction()の削除記述はされていましたが、実行されていない関数がありました。中身のif文は特段関数内に入れる必要はないかと思うので、別の場所(url.addEventListenerの引数)に移しました。 2. cng.addEventListener(); の削除見る限り特に何もしていない物だったので削除しました 3. url.addEventListenerへの追記 1の関数内にあったif文をこちらに移しました。 4. resultElementの作成初期のコードではHTMLのに対して値を入れるプログラムではなく、url(#url-submit)に対して値を入れる内容だったので新たにresultElementを作成し、こちらに結果を入れるように変更しました。以下修正後のコードです。多分これをHTMLから読み込めば動くと思います。 ``` var cls = document.querySelector("#gakunen") var num = document.querySelector("#class") var nam = document.querySelector("#number") var cng = document.querySelector("#yourname") var url = document.querySelector('#url-submit') let resultElement = document.querySelector('#url') url.addEventListener("click", () => { 　　if (cng.value === "高校1年") { 　　　　cng = "https://aaa.com" 　　} else if (cng.value === "高校2年") { 　　　　cng = "https://bbb.com" 　　} else if (cng.value === "高校3年") { 　　　　cng = "https://ccc.com" 　　} else { 　　　　cng = "学年が入力されていません" 　　} 　　resultElement.innerText = cng + "ああ" + cls.value + "いい" + num.value + "うう" + nam.value + "ええ" }) ``` (teratail上の表示の関係で、半角スペースは削除される為、全角スペースでインデントを付けています。コピペするとスペースが原因で動かないかもしれません。)

Y----Y

2022/05/01 06:13

ありがとうございます!無事に動作しました!

行動規範の内容に同意します