前提・実現したいこと
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で勉強中ですがバージョンの情報はわかりません。
回答3件
あなたの回答
tips
プレビュー