質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

【HTML、jQuery】ページ内の選択フォームから送信するとリンクが表示されるようにしたい。

run_
run_

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

1クリップ

314閲覧

投稿2022/01/10 09:50

前提・実現したいこと

初心者です。
HTML、CSS、JavaScriptを使用しています。
選択欄を作ったので、選択し、送信を押すと選択した用語に合ったリンクを結果の文字の下に表示できるようにしたいです。

発生している問題・エラーメッセージ

どのようにすれば表示したいURLのリンクを貼ることができるのかわからないです。

該当のソースコード

HTML

<!DOCTYPE html> <html lang="ja"> <head> <script src="jquery-3.6.0.min.js"></script> <meta charset="UTF-8"> <link rel="stylesheet" href="test1.css"> <title>観光地検索</title> </head> <body> <h1 class="title">観光地を検索しよう!</h1> <p class="search_form"> <label class="search_form">ワード:<input type="text" id="nameText"></label> <button type="submit" class="btn btn-submit serch">送信</button> </p> <p id="msg" class="search_result"></p> <h5>ワードが思いつかない方へ</h5> <form id="select"> <select id="vocablary"> <option value='0'>選択してください</option> <option value='1'>1. 遊園地</option> <option value='2'>2. 動物園</option> <option value='3'>3. 水族館</option> <option value='4'>4. 神社</option> <option value='5'>5. お寺</option> <option value='6'>6. 温泉</option> <option value='7'>7. 公園</option> <option value='8'>8. 滝</option> </select> <button type="submit" class="btn btn-submit">送信</button> </form> <div class="vocablary-result"> <h4>結果</h4> <p id="wikipagewikilink"></p> </div> <script src="test1.js"></script> </body> </html>

CSS

.title { font-size: 30px; color: white; text-align: center; background-color: #a0d8ef; height: 90px; padding-top: 38px; } .search_form{ text-align: center; color: #87ceeb; font-size: 18px; font-weight: bold; } .search_result{ text-align: center; color: #686868; } h5{ padding-top: 30px; color: #313131; text-align: center; } #select{ margin: 0 auto; width: 200px; color: #313131; } #bocaburary{ margin: 0; padding: 0 10px; border: none; color: #202020; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 300; border-radius: 0; box-shadow: none; transition: all .3s; background: rgba(0, 0, 0, 0.08); margin: 10px 0; width: 100% } .btn{ font-family: 'Dosis', sans-serif; font-size: 9px; font-weight: 400; background: #5983ff; border: 1px solid #5979ff; color: white; box-shadow: inset 0 1px 0 #5867ed; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); transition: all .3s; padding: 5px 10px; }

JavaScript

function inputChange(event) { var url = "https://ja.dbpedia.org/page/" + nameText.value; msg.innerHTML = '<a href="'+url+'">DBpediaで調べる</a>'; } let nameText = document.getElementById('nameText'); nameText.addEventListener('change', inputChange); let msg = document.getElementById('msg'); $(function() { $('#select').submit(function() { var selectValue = $('#vocablary').val(); $('#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>); return false; }); });

補足情報(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のリンクを貼りたいです。(文字は「調べる」としたいです。)

イメージ説明

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
run_

2022/01/10 10:11

そうです!エラーというか、そのリンクを表示したくても、サイト内で反映されないです。 どうしたら反映されるのでしょうか。 初心者で、すみません。よろしくお願いいたします。
m.ts10806

2022/01/10 10:14

文字列で、中にダブルクォーテーションあるので、シングルクォーテーションで囲ってみては。とりあえずで。
run_
m.ts10806

2022/01/10 11:24

(a"a"a)のようになってるので ('a"a"a')とするという意味です。 文字列の扱いの話。
run_

2022/01/10 11:29

ごめんなさい。理解しました。 修正しましたが、変化はありません。。。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。