htmlで変数を使ってリンクを貼るには

Question

同じページの中で同じURLを2か所以上で使いたいのでCSSでURLを変数として定義し、htmlでその変数を使ってリンクを貼ろうとしましたが上手く行きません。
JS：
var url27 = 'https://XXXXX.html';
とし、
HTML:

<div class="mainbox"> <h2>直近のお知らせ</h2> <div class="submenu"> <h3>リリース（2021.X.X)</h3> <li>リリースの概要　<a href=url27></a></li> </div> </div> <h2>履歴</h2> <div class="memobox_title"> <ul> <h3>リリース（2021.X.X)</h3> <li>リリースの概要　<a href=url27></a></li> </ul> </div>

というのを2か所以上で表示したいのですが、HTML側でurlXXを上手く取得できず、ファイルが見つかりませんというエラーになります。
Webの左下のURLの表記もhttps://XXXXX.htmlではなく、url27と表記されています。

簡単にできると思っていたのですが、innerHTML など色々試しても解決できません。
分かる方がいましたら、よろしくお願いします。

Comments

[maisumakun]

> CSS：
var urlXX = "https://XXXXXX.html";

それは本当にCSSですか？

[m.ts10806]

Javascriptではないのでしょうか

[Emizo1]

ご指摘の通りです。JavaScriptのところを間違えてCSSと記載してしまいました。訂正します。

[m.ts10806]

では、「うまくいかないコード」を提示してください。コードはマークダウンで提示してくださいね。
あと起きている現象詳細も。

[Emizo1]

分かる範囲で記載を追加しました。よろしくお願いします。

Answer 1

質問文の様にタグの中にjavascriptの変数を埋め込むようなことはできません。
ちゃんと手法さえ知っていれば簡単にできます。

hrefのURLを変更するには、setAttributeメソッドを使います。

ただ、変更したい対象のA要素を何らかの手段で判別する必要があります。
ここでは変更対象のa要素に特定のクラスを付与し、querySelectorAllで抽出しています。

<p>リンクのURLを変えたいaタグには <code>class="change-url"</code>をつけています。</p>
<a href="#" class="change-url">このリンクのURLは変わります。</a><br>

<a href="#" class="no-change-url">このリンクのURLは変わりません。</a><br>

<a href="#" class="change-url">このリンクのURLも変わります。</a>

var urlXX = "https://teratail.com";
// querySelectorAllでURLを変えたいa要素を取得し、それぞれにsetAttributeでhrefを変更する。
document.querySelectorAll('a.change-url')
  .forEach( e => {
    e.setAttribute("href", urlXX);
});

codepenでのデモ

Answer 2

こんな方法もあるよ

JavaScript でページ遷移する関数つくって

function hoge() {
   location.href = 'https://XXXXX.html';
}

リンクはこんなかんじで

<a href="javascript:hoge()">hoge</a>

Comments

[Emizo1]

ご連絡が遅くなりましたが、回答ありがとうございます。簡単な記述で解決できました。

[takasima20]

(･∀･)b