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

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

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

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

Q&A

解決済

3回答

428閲覧

JavaScript DOMでの要素の追加

heysuky

総合スコア21

JavaScript

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

0グッド

0クリップ

投稿2018/11/20 07:19

前提・実現したいこと

inputでボックスを作り(必ずしもinputでやらなくてもいいのかもしれませんが、この方法しかまだ学んでいないのでおそらくこの方法でやるのだと思います)、その中に書かれた文字とそのURLを下の段に追加するという課題をやっております。
例: 
リンク名:Google URL:https://www.google.co.jp リンク追加(ボタン。これをクリックすると下にURLつきの文字が出る仕組み)

Google(クリックするとgoogleのurlに飛べる状態。下線あり)

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

コードを書いたのですが、出てくるのはlink(下線付き)の文字でGoogleという文字は出ていなく、URLもGoogleのものではありませんでした。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script> function addElement() { var link = document.getElementById(`link`); var url = document.getElementById(`url`); var newDiv = document.createElement(`div`); newDiv.innerHTML = `<a href="url">link</a>`; var box = document.getElementById(`box`); box.appendChild(newDiv); } window.onload = function() { var add = document.getElementById(`add`); add.addEventListener(`click`, addElement, false); } </script> </head> <body> <form action="#"> <label for="link">リンク名: </label> <input type="text" name="link" id="link"> <label for="url">URL: </label> <input type="text" name="url" id="url"> <button id="add">リンク追加</button> <div id="box"></div> </form> </body> </html>

試したこと

おそらくaddElement内で「newDiv.innerHTML =」以降が間違っているんだろうなと思っていますが調べても書き方がわからず困っています。
間違っている箇所が分かっているので自力で何とかやりたくていくつか思うように書き直してみたのですが結局解決はできませんでした。
JavaScriptを勉強している最中でこれ以上難しい内容を勉強していないのでこのぐらいの難易度でシンプルな書き方があればご教示願いたいです。

補足情報(FW/ツールのバージョンなど)

CodeCampで勉強中ですがバージョンの情報はわかりません。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

otn

2018/11/20 07:30

googleの文字はどこで出しているつもりですか?
guest

回答3

0

ベストアンサー

テキストでHTMLを作ると、想定していない形のHTMLを不正に作るXSSという攻撃がありますので、できるだけHTMLを書いて起こす方式は避けるべきです。

javascript

1 function addElement() { 2 var link = document.getElementById('link'); 3 var url = document.getElementById('url'); 4 var newAnchor = document.createElement('a'); 5 newAnchor.textContent = link.value; 6 newAnchor.href = url.value; // 修正済み 7 box.appendChild(newAnchor); 8 } 9

投稿2018/11/20 07:30

編集2018/11/20 07:34
maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

heysuky

2018/11/21 08:43

試してみたら解決しました、本当にありがとうございました。 調べてみても.valueの存在にたどり着けなかったので教えてくださったことと、コードがとても見やすくてシンプルで理解しやすかったのがとても参考になりました、ありがとうございました。 innerHTMLという書き方を習ったのですが、textContentの方がいいのでしょうか? 調べてみると少し違いがあるようですが、基本的にtextContentの方がいいという記載があって気になりました。
maisumakun

2018/11/21 08:45

innerHTMLはその名の通り「HTML」を操作するものですので、タグ混入=XSSの危険があります。テキストだけ入れる場合にはtextContentのほうが適切です。
heysuky

2018/11/21 10:24

分かりました、気を付けます。ありがとうございました。
guest

0

値を取得しましょう。その上で、その文字列を連結すればよいです。

<input type="text"> - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/text#Value

value 属性は、テキスト入力欄に入力された現在のテキストの値が入っている DOMString です。 JavaScript では HTMLInputElement.value プロパティを使ってこれを受け取ることができます。

js

1let theText = myTextInput.value;

投稿2018/11/20 07:31

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#add').addEventListener('click',function(){ 4 var link = document.querySelector('#link').value; 5 var url = document.querySelector('#url').value; 6 var newA = document.createElement('a'); 7 newA.setAttribute("href",url); 8 newA.appendChild(document.createTextNode(link)); 9 var newDiv = document.createElement('div'); 10 newDiv.appendChild(newA); 11 document.querySelector('#box').appendChild(newDiv); 12 }); 13}); 14 15 16</script> 17<form action="#"> 18<label for="link">リンク名: </label> 19<input type="text" name="link" id="link"> 20<label for="url">URL: </label> 21<input type="text" name="url" id="url"> 22<button id="add" type="button">リンク追加</button> 23<div id="box"></div> 24</form>

投稿2018/11/20 07:29

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問