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

Question

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

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

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

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

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

Comments

[madoka9393]

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

Answer 1

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

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

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

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

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

Comments

[kozica]

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]

それだと、クリックした時点で リンクに反応してしまうと思うので href="" に飛ぶと思います。

head に入れた js を window.onload =function()の中に入れてみてください。

window.onload =function(){ ここに今のjs}

[kozica]

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

Answer 2

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

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

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

Comments

[kozica]

なるほど！！
試してみます！