AIと戦って、あなたの人生のリスク診断 >>

javascriptを用いてクリックしたリンクのテキストを取得するにはどうすればいいでしょうか?

ページ読み込み時(onload)にリンクにonClickイベントをつけてクリックしたときにurlなどを取得することはできるのですが、リンクテキストをどうしても取得できません。

ページ内のそれぞれのリンクタグにそれぞれ異なるid要素をつけられればよさそうなのですが。。。

ページ内のリンクタグにidがついていないことしてください。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

<html>


<body>
<a href="#">abc</a>
<script>
document.body.onclick=mess;
function mess(e){var o=e?e.target:event.srcElement;if(o.tagName=='A') alert(o.innerHTML);}
</script>
    • good
    • 0
この回答へのお礼

うまく abc を取得することができました。
リンクを増やしてもそれぞれうまくとることができました。
ありがとうございます。

お礼日時:2008/10/27 20:17

No.1です。


勘違いしていたみたいですね。

No.2さんの言うとおり、欲しいのは、innerTextの方ですよね。
    • good
    • 0
この回答へのお礼

No3さんの回答でうまく取得することができました。

お礼日時:2008/10/28 12:22

onClickイベントは使用してもよいのですよね?


以下のようなのではいかがでしょうか?

<html>
<head>
<script type="text/javascript">
function test(e){
alert("text=" + e.innerText + " link=" + e.href);
}
</script>
</head>
<body>
<a href="***1.html" onclick="test(this)">リンク1</a><br>
<a href="***2.html" onclick="test(this)">リンク2</a><br>
<a href="***3.html" onclick="test(this)">リンク3</a><br>
<a href="***4.html" onclick="test(this)">リンク4</a><br>
</body>
</html>
    • good
    • 0
この回答へのお礼

できそうな感じだったのですが、試してみるとundefindとなってしまい取得できませんでした。

お礼日時:2008/10/28 12:21

こういうことですか?


間違っていたらごめんなさい

<html>
<head>
<title>test</title>
<script type="text/javascript">
function DisplayLinkURL( obj )
{
alert( obj.href );
}
</script>
</head>
<body>
<a href="http://www.yahoo.co.jp/" onclick="DisplayLinkURL(this)">yahoo</a>
<br>
<a href="http://www.google.co.jp/" onclick="DisplayLinkURL(this)">google</a>
</body>
</html>
    • good
    • 0
この回答へのお礼

これはURLのですね

お礼日時:2008/10/28 12:20

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qタグのテキストを取得

jqueryを使っています。

$('a');を使用しページ内のaタグを全て抜き出すと
hrefの属性値が表示されてしまい、取り出したい<a>タグに
囲まれたテキストを取得することが出来ません。

<a href="http://yahoo.co.jp">Yahoo!</a>
<a href="http://google.co.jp">Google</a>

取り出したい内容は「Yahoo!」及び「Google」のテキスト部分です。
恐らく簡単な内容だとは思いますがご教授お願い出来ますでしょうか?

Aベストアンサー

アンカーに挟まれるのは必ずしもテキストとは限りません。
javascriptで普通にとるならこんなやりかたもできます。

<script>
function check(){
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
var n=a[i].firstChild;
while(n){
if(n.nodeName=="#text") alert(n.nodeValue);
n=n.nextSibling;
}
}
}
</script>
<a href="http://yahoo.co.jp">Yahoo!<img src="1.jpg">Yohaa!</a>
<a href="http://google.co.jp">Google</a>

<input type="button" value="check" onclick="check()" />

Qidを使わずにonclickで自身の要素取得

javascriptで
<a href="XXX.XXX" title="ゴール" onclick="element()">test</a>
function() {
idを使わずにここにtitle属性のゴールを習得する方法を記述したいのですが、わかりません
よろしくお願いします
}

Aベストアンサー

こんにちは。


==== HTML
<a href="" title="ゴール" onclick="getTitle(this);return false;">test</a>
<a href="" title="スタート" onclick="getTitle(this);return false;">test2</a>


==== JavaScript
function getTitle ( obj ) {
var title = obj.getAttribute('title');
alert ( title );
}

こういうことでしょうか。
違っていたらすみません。

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい

QjQueryでクリックされた要素のidを関数で取得

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.alphabet').click(function(){
function alertAlphabet(){
alert($(this).attr('id'));
};
alertAlphabet();
});
});
</script>

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">...続きを読む

Aベストアンサー

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQueryオブジェクト
alert(obj.attr('id'));
};
</script>
</head>
<body>
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
</body>
</html>

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQu...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qリンク移動先のURLを取得

こんにちは。

JavaScriptを使って、<a href="…">で移動したときの、
移動先のアドレスを取得する方法を探しています。

知っている方がいれば、ご教示願います。

Aベストアンサー

どういうことかよくわからないけど…

そのHTML内でどのリンクをクリックしたかを取得するという意味でしょうか。それならば、こういうこと?

<html>
<script type="text/javascript">
window.onload=function(){
var e=document.getElementsByTagName('A');
for (var i=0; i<e.length; i++) e[i].onclick=function(){alert("あなたの行き先のURLは:\n\n" + this.href);}
}
</script>

<body>
<p><a href="http://www.yahoo.co.jp/index.html">Yahoo</a>
<p><a href="http://www.google.co.jp/">Google</a>
<p><a href="http://www.infoseek.co.jp/">Infoseek</a>
</body>
</html>

どういうことかよくわからないけど…

そのHTML内でどのリンクをクリックしたかを取得するという意味でしょうか。それならば、こういうこと?

<html>
<script type="text/javascript">
window.onload=function(){
var e=document.getElementsByTagName('A');
for (var i=0; i<e.length; i++) e[i].onclick=function(){alert("あなたの行き先のURLは:\n\n" + this.href);}
}
</script>

<body>
<p><a href="http://www.yahoo.co.jp/index.html">Yahoo</a>
<p><a href="http://www.google.co.jp/">Go...続きを読む

QリンクでPOSTデータを送信することは可能ですか?

はじめまして。
Submitボタンを使用せずに<A>リンクでFORMのPOSTメソッドデータを送信することは可能でしょうか?
やはりURLにデータを付加して送信するしかないのでしょうか?
ご教授よろしくお願い致します。

Aベストアンサー

javascript を使えば可能です。大雑把にはこんな感じ。

・パラメータが全部 hidden な form を記述しておく(ブラウザでは表示されない)
・<a href> では、その form を submit するように javascript を記述する

試してないですけど、こんな感じ。

<form name=f method=POST action="http://どこか">
<input type=hidden name=x1 value=v1>
</form>

<a href="javascript:document.f.submit()">リンクから submit</a>

QJSPでリンクを利用してパラメータを次画面に渡す方法について。

一覧表示されているデータのNOをクリックすると、二つのパラメータでデータベースへアクセスし、該当データの詳細画面に遷移する、というプログラムを作っています。

データベースへアクセスする際に必要なIDは2つで、仮にID_A、ID_Bとします。
リンク部分のソースは

---------------------------------------------------------------------
<a href = "update_form.jsp?ID_A=<%= rs.getString("ID_A") %>">番号</a>
<input type="hidden" name="ID_B" value="<%= rs.getString("ID_Bcat_id") %>">
---------------------------------------------------------------------

としておりますが、次画面へ遷移すると、ID_Bの値はnullとなってしまうために、正常にデータの取得ができません。

二つのパラメータを使用する場合のパラメータを渡す方法を教えて頂きたいと思います。よろしくお願いします。

一覧表示されているデータのNOをクリックすると、二つのパラメータでデータベースへアクセスし、該当データの詳細画面に遷移する、というプログラムを作っています。

データベースへアクセスする際に必要なIDは2つで、仮にID_A、ID_Bとします。
リンク部分のソースは

---------------------------------------------------------------------
<a href = "update_form.jsp?ID_A=<%= rs.getString("ID_A") %>">番号</a>
<input type="hidden" name="ID_B" value="<%= rs.getString("ID_Bcat_id") %>">...続きを読む

Aベストアンサー

<a href = "update_form.jsp?ID_A=<%= rs.getString("ID_A") %>&ID_B=<%= rs.getString("ID_Bcat_id") %>">番号</a>

としてID_Bを&で繋げればMethod="get"で送れますね。
inputタグで送る場合はformタグでactionアトリビュートに飛ぶjspを指定してsubmitボタンかJavaScriptでsubmitさせなければならないと思います。

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

QJQueryでクリックされた文字を取得したい

テーブルがあり、連番が 1 2 3 と振ってあります。
その文字情報をJQueryで取得するにはどのように記述すれば良いのでしょうか?

例)1をクリック → 1 を取得。


<table border="1" width="150">
<tbody>
<tr>
<td width="50"><a href="#">1</a></td>
<td>田中</td>
</tr>
<tr>
<td><a href="#">2</a></td>
<td>佐藤</td>
</tr>
<tr>
<td><a href="#">3</a></td>
<td>鈴木</td>
</tr>
</tbody>
</table>

ご存知の方教えて下さい。

Aベストアンサー

#2です。
一応全部書いたサンプル。
(アンカーは不要に感じたので、1列目のセルという感じで指定してます)

<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#table1 td:first-child').click(function(){
alert( $(this).text() );
});
});
</script>

</head>
<body>


<table border="1" width="150" id="table1">
<tbody>
<tr>
<td width="50">1</td>
<td>田中</td>
</tr>
<tr>
<td>2</td>
<td>佐藤</td>
</tr>
<tr>
<td>3</td>
<td>鈴木</td>
</tr>
</tbody>
</table>

</body>
</html>

#2です。
一応全部書いたサンプル。
(アンカーは不要に感じたので、1列目のセルという感じで指定してます)

<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#table1 td:first-child').click(function(){
alert( $(this).text() );
});
});
</script>

</head>
<body>


<table border="1" width="150" id="table1">
<tbody>
<tr>
<td width="50">1</td>
<td>田中</td>
</tr>
<tr>
<td>...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング