前提・実現したいこと
初心者です。
HTML、CSS、JavaScriptを使用しています。
選択欄を作ったので、選択し、送信を押すと選択した用語に合ったリンクを結果の文字の下に表示できるようにしたいです。
発生している問題・エラーメッセージ
どのようにすれば表示したいURLのリンクを貼ることができるのかわからないです。
該当のソースコード
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<script src="jquery-3.6.0.min.js"></script>
5<meta charset="UTF-8">
6<link rel="stylesheet" href="test1.css">
7<title>観光地検索</title>
8</head>
9<body>
10
11 <h1 class="title">観光地を検索しよう!</h1>
12
13 <p class="search_form">
14 <label class="search_form">ワード：<input type="text" id="nameText"></label>
15 <button type="submit" class="btn btn-submit serch">送信</button>
16 </p>
17
18 <p id="msg" class="search_result"></p>
19
20 <h5>ワードが思いつかない方へ</h5>
21
22 <form id="select">
23
24 <select id="vocablary">
25
26 <option value='0'>選択してください</option>
27 <option value='1'>1. 遊園地</option>
28 <option value='2'>2. 動物園</option>
29 <option value='3'>3. 水族館</option>
30 <option value='4'>4. 神社</option>
31 <option value='5'>5. お寺</option>
32 <option value='6'>6. 温泉</option>
33 <option value='7'>7. 公園</option>
34 <option value='8'>8. 滝</option>
35
36 </select>
37
38 <button type="submit" class="btn btn-submit">送信</button>
39
40 </form>
41
42 <div class="vocablary-result">
43
44 <h4>結果</h4>
45 <p id="wikipagewikilink"></p>
46
47 </div>
48
49<script src="test1.js"></script>
50</body>
51</html>
CSS
1.title {
2 font-size: 30px;
3 color: white;
4 text-align: center;
5 background-color: #a0d8ef;
6 height: 90px;
7 padding-top: 38px;
8 }
9
10.search_form{
11 text-align: center;
12 color: #87ceeb;
13 font-size: 18px;
14 font-weight: bold;
15}
16
17.search_result{
18 text-align: center;
19 color: #686868;
20}
21
22h5{
23 padding-top: 30px;
24 color: #313131;
25 text-align: center;
26}
27
28#select{
29 margin: 0 auto;
30 width: 200px;
31 color: #313131;
32}
33
34#bocaburary{
35 margin: 0;
36 padding: 0 10px;
37 border: none;
38 color: #202020;
39 font-family: 'Open Sans', sans-serif;
40 font-size: 16px;
41 font-weight: 300;
42 border-radius: 0;
43 box-shadow: none;
44 transition: all .3s;
45 background: rgba(0, 0, 0, 0.08);
46
47 margin: 10px 0;
48 width: 100%
49}
50
51.btn{
52 font-family: 'Dosis', sans-serif;
53 font-size: 9px;
54 font-weight: 400;
55 background: #5983ff;
56 border: 1px solid #5979ff;
57 color: white;
58 box-shadow: inset 0 1px 0 #5867ed;
59 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
60 transition: all .3s;
61 padding: 5px 10px;
62}
63
JavaScript
1function inputChange(event) {
2 var url = "https://ja.dbpedia.org/page/" + nameText.value;
3 msg.innerHTML = '<a href="'+url+'">DBpediaで調べる</a>';
4}
5
6let nameText = document.getElementById('nameText');
7nameText.addEventListener('change', inputChange);
8let msg = document.getElementById('msg');
9
10$(function() {
11 $('#select').submit(function() {
12
13 var selectValue = $('#vocablary').val();
14
15 $('#wikipagewikilink').html(<a href="https://ja.dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fja.dbpedia.org&query=prefix+dbp%3A+%3Chttp%3A%2F%2Fja.dbpedia.org%2Fresource%2F%3E%0D%0Aprefix+dbp-owl%3A+%3Chttp%3A%2F%2Fdbpedia.org%2Fontology%2F%3E%0D%0Aprefix+rdfs%3A+%3Chttp%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%3E%0D%0A%0D%0ASELECT+*%0D%0AWHERE+%7B%0D%0A++++++++dbp%3A%E9%81%8A%E5%9C%92%E5%9C%B0+dbp-owl%3AwikiPageWikiLink+%3FURL.%0D%0A++++++++%3FURL+rdfs%3Alabel+%3Fname.%0D%0A%7D%0D%0Alimit+50&format=text%2Fhtml&timeout=0&signal_void=on">調べる</a>);
16
17 return false;
18 });
19 });
補足情報（FW/ツールのバージョンなど）
実行画面です。
「結果」の下に、
https://ja.dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fja.dbpedia.org&query=prefix+dbp%3A+%3Chttp%3A%2F%2Fja.dbpedia.org%2Fresource%2F%3E%0D%0Aprefix+dbp-owl%3A+%3Chttp%3A%2F%2Fdbpedia.org%2Fontology%2F%3E%0D%0Aprefix+rdfs%3A+%3Chttp%3A%2F%2Fwww.w3.org%2F2000%2F01%2Frdf-schema%23%3E%0D%0A%0D%0ASELECT+*%0D%0AWHERE+%7B%0D%0A++++++++dbp%3A%E9%81%8A%E5%9C%92%E5%9C%B0+dbp-owl%3AwikiPageWikiLink+%3FURL.%0D%0A++++++++%3FURL+rdfs%3Alabel+%3Fname.%0D%0A%7D%0D%0Alimit+50&format=text%2Fhtml&timeout=0&signal_void=on
↑このURLのリンクを貼りたいです。（文字は「調べる」としたいです。）
Q&A
自己解決
