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

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

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

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

19871閲覧

jsの変数をaタグhrefに渡すには?

kozica

総合スコア58

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/10/31 00:46

編集2018/10/31 01:01

aタグの
href="URL"
URL部分にjsで処理した変数を渡したいです

下記のようにしているのですが、うまくいきません。
お力をお貸しください。

html

1<div class = "button"> 2 <a id="btn-a" href="" target="_blank" class="button-a">BUTTON</a> 3</div>

js

1var target = document.getElementById("btn-a"); 2target.href = "URL";

エラー内容
target.href = "URL";
Uncaught TypeError:Cannot set property 'href'

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

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

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

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

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

madoka9393

2018/10/31 00:55 編集

当方では問題なく動作しているように見えます( https://jsfiddle.net/madoka9393/t7y5hqb2/ ) デベロッパーツールでエラーメッセージ等が確認されている場合にはそちらを質問文に追記いただきたく。
guest

回答2

0

ベストアンサー

javascriptでのhref属性変更が、htmlの描画後なら、問題ないです。
現状のコードは先にjavascriptが実行されていて、targetを見失っているのではないでしょうか?

下記なら問題なく実行できています。

html

1<div class = "button"> 2 <a id="btn-a" href="" target="_blank" class="button-a">BUTTON</a> 3</div> 4<script> 5var target = document.getElementById("btn-a"); 6target.href = "http://popchat.jp"; 7</script>

↓こちらだと、上記理由で、当然のごとくエラーが出ます。

html

1<script> 2var target = document.getElementById("btn-a"); 3target.href = "http://popchat.jp"; 4</script> 5<div class = "button"> 6 <a id="btn-a" href="" target="_blank" class="button-a">BUTTON</a> 7</div>

投稿2018/10/31 01:02

編集2018/10/31 01:12
colling

総合スコア798

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

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

kozica

2018/10/31 01:46

headにjsファイルを置いていたので処理の順番でよみこめなかったということなのですね headにjsファイルを置いていますので、この場合ですと <a id="btn-a" href="" target="_blank" class="button-a" onClick="setURL()">BUTTON</a> とonClickを入れて、jsファイルに下記のようにすればいいでしょうか? jsファイル function setURL() { var target = document.getElementById("btn-a"); target.href = "http://popchat.jp"; };
colling

2018/10/31 01:52

それだと、クリックした時点で リンクに反応してしまうと思うので href="" に飛ぶと思います。 head に入れた js を window.onload =function()の中に入れてみてください。 window.onload =function(){ ここに今のjs}
kozica

2018/10/31 01:56

仰る通りでした! collingさんのアドバイスのおかげで、読み込み順序について理解が深まりました! 本当にありがとうございました!
guest

0

質問文のコードではtarget.hrefに文字列のURLが代入されているだけです。

変数を渡すのであればこのようになります。

JavaScript

1var target = document.getElementById("btn-a"); 2var url = (何かしらの処理で作成?されたURL); 3target.href = url;

投稿2018/10/31 01:00

madoka9393

総合スコア992

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

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

kozica

2018/10/31 01:01

なるほど!! 試してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問