HTML、JavaScriptを用いて用語投入し、その用語のDBpediaページのリンクを表示したい。

前提・実現したいこと

初心者です。
HTML・CSSとJavaScriptを用いています。
検索フォームを作り、用語を投入するとその用語のDBpediaページのリンクを表示できるようにしたいです。

発生している問題

表示されるDBpediaページのURLをリンク化する方法がわかりません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" href="test2sheet.css">
6<title>観光地検索</title>
7</head>
8<body>
9
10    <h1 class="title">観光地を検索しよう!</h1>
11
12    <p class="search_form">
13        <label class="search_form">ワード：<input type="text" id="nameText" ></label>
14    </p>
15
16    <p id="msg" class="search_result"></p>
17
18<script>
19function inputChange(event){
20  msg.innerText = 'https://ja.dbpedia.org/page/' + nameText.value;
21
22}
23
24let nameText = document.getElementById('nameText');
25nameText.addEventListener('change', inputChange);
26let msg = document.getElementById('msg');
27
28</script>
29
30</body>
31</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: 30px;
8  }
9
10  .search_form{
11      text-align: center;
12      color: #87ceeb; 
13  }
14
15.search_result{
16    text-align: center;
17    color: #686868;
18}

補足情報

実行画面です。

①用語入力前

②用語入力後

この②用語入力後のURLをリンク化する方法があれば知りたいです。

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

回答1件

ベストアンサー

JsFiddle-zegoh2jL
inputChange関数をちょっと変えればリンクになります。

JS
1      function inputChange(event) {
2        var url = "https://ja.dbpedia.org/page/" + nameText.value;
3        msg.innerHTML = '<a href="'+url+'">'+url+'</a>';
4      }

投稿2021/12/06 12:10