JavaScriptからhrefを指定する方法とは【メンターが回答】

「JavaScriptからhrefを指定する方法とは。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。JavaScriptの方で、aタグを指定し、hrefを変更する書き方についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

JavaScriptからhrefを指定する方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

下記の飛び先をHTMLファイルで指定したいんですが、どうすれば良いでしょうか?JavaScriptで処理したいと思っています。

https://example.com/123456789/

 

該当のソースコード

HTML

<a href="https://example.com">

JavaScript

var id = 123456789;

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

メンターからの回答

JavaScriptからhrefを指定する方法があるので、それを使いましょう。

まずはJavaScriptからaタグを指定できるように、idやクラスを付けてあげて下さい.

<a id="hoge" href="https://example.com">

JavaScriptの方で、aタグを指定し、hrefを変更します。

const target = document.getElementById("hoge");
target.href = "http://hogepiyo.co.jp";

このような形でhrefを指定することができます。

 

以上、JavaScriptからhrefを指定する方法について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

他にもJavaScriptでグローバル変数を取得する方法についてメンターが回答しているので、合わせてご覧ください。

 

回答してくれたメンター

小芝 涼太(こしばりょうた)

Webアプリケーションエンジニア。

Vue.jsを用いたフロントエンド開発を中心に、UXデザインなども行なっております。

 

田島悠介

JavaScriptからhrefを指定する方法について解説したよ。

大石ゆかり

JavaScriptで後からリンクのアドレスを変えることが出来るんですね。

田島悠介

そうそう。今回はa要素を取得して飛び先を変えただけだけど、クリックした時にデフォルトの挙動を無効にして別のサイトに移動させることも出来るよ。

大石ゆかり

わかりました。ありがとうございます!

 

TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。