関数を呼び出したエレメントのオブジェクトを取得する方法

解決済

質問者：rqg2010
質問日時：2008/12/21 08:20
回答数：7件

お世話になります。
function ChngLang(ThisElm,ChngElm){
・・・・・・・・・・・
}
と関数を定義し、
<input type=button value="続き" onClick="ChngLang(this,'CmntCrab2')">
<div id="CmntCrab2">
</div>
とすれば、この呼び出したタグ<input >のvalueを変えたりと<input>タグを操作できます。

ここで、
function ChngLang(ThisElm,ChngElm){
を、
function ChngLang(ChngElm){
と、いうようにしても、呼び出した側のエレメントのオブジェクト
つまり、<input>タグのオブジェクトthisを関数ChngLang()の中で取得することはできないものでしょうか。
呼び出し側では引数thisを省略して
<input type=button value="続き" onClick="ChngLang('CmntCrab2')">
というようにしたいのですが。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (7件)

ベストアンサー優先
最新から表示
回答順に表示

No.7ベストアンサー

回答者： _pipi_
回答日時：2008/12/21 22:11

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>TEST</title>
<form id="fm0">
<p><input type=button value="消す" id="btn0"></p>
<div id="a">
ここを表示したり消してみたり？
</div>
<p><input type=button value="English" id="btn1"></p>
<div id="b" style="display:none">
I display here and delete it?<br>
※正しい翻訳かは知らんぞ！^^;
</div>
</form>
<script type="text/javascript">
document.getElementById('fm0')./*@cc_on @if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){
var element = evt.target || evt.srcElement;
if( element.id == 'btn0') changeDisplay( element, 'a', '続き/消す');
if( element.id == 'btn1') changeDisplay( element, 'b', 'English/消す');
}, false);

function changeDisplay( btn, element, txt ){
if( typeof( element ) == 'string' ) element = document.getElementById( element );
var f = element.style.display == 'none' ?1:0;
btn.value = txt.split('/')[f];
element.style.display = f? 'block': 'none';
}
</script>
これで違いがわかるかな？

- 0
- 件

通報する

No.6

回答者： _pipi_
回答日時：2008/12/21 21:58

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>TEST</title>

<input type=button value="消す" onClick="changeDisplay( this, 'a','続き/消す')">
<div id="a">
ここを表示したり消してみたり？
</div>
<input type=button value="English" onClick="changeDisplay( this, 'b','japanese/english')">
<div id="b">
ここを表示したり消してみたり？
</div>
<script type="text/javascript">

function changeDisplay( btn, element, txt ){
if( typeof( element ) == 'string' ) element = document.getElementById( element );
var f = element.style.display == 'none' ?1:0;
btn.value = txt.split('/')[f];
element.style.display = f? 'block': 'none';
}
</script>

- 0
- 件

通報する

この回答へのお礼

_pipi_さん、お早うございます。
夜早く寝てしまうもので、その分朝早く起きますが、
ご丁寧にサンプルスクリプトも頂きありがとうございます。
試してみました。ばっちりです。
やはり、thisは渡した方がよいようですね。
しかし、他の引数の扱いなどとても参考になりました。
どうもありがとうございました。

通報する

お礼日時：2008/12/22 06:49

No.5

回答者： taloo
回答日時：2008/12/21 19:24

Safari3.1とOpera9.6か9.5もJScriptにも対応していますので、単純にevent.srcElementでも取得できると思います。

各ブラウザの古いバージョンやメジャーなブラウザではFirefoxのみJScriptに対応していないので、

if(window.addEventListener && !window.event) {
window.addEventListener('load',
function(){document.body.addEventListener('click', function(e){window.event=e;}, true)}
, false);
}

と書いておいて、

function ChngLang(ChngElm){
ThisElm=event;
・・・・・・・・・・・
}

<input type=button value="続き" onClick="ChngLang('CmntCrab2')">

こんな感じでできないでしょうか。

エラーが出る場合は、以下の部分のtrueをfalseに変更してみてください。
function(){document.body.addEventListener('click', function(e){window.event=e;}, false)} // trueをfalseに変更

古くからある方法なのですが、ただしこの方法、Ajaxに対応していない可能性があります。
（Ajaxで追加表示した部分では機能しない可能性があります）

ChngLang()関数の中で、
ThisElm = arguments.callee.caller.arguments[0].target||event.srcElement;
でもできるようです。

より厳密な取得方法は参考URLを参照してください。

参考URL：http://p2b.jp/index.php?UID=1149066600

- 0
- 件

通報する

この回答へのお礼

talooさん、お早うございます。
ご丁寧なレスありがとうございます。
EventListenerについては、以前勉強したことがありますが、良くわからないのでそのままにしてしまっていました。
これを機に再度調べます。
thisを取得する手がかりもわかりました。
＞ThisElm = arguments.callee.caller.arguments[0].target||event.srcElement;
の方では、thisをうまく取得できませんでした。
もう少し調べてみます。
どうもありがとうございました。

通報する

お礼日時：2008/12/22 07:10

No.4

回答者： _pipi_
回答日時：2008/12/21 14:59

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>TEST</title>

<input type=button value="消す" onClick="changeDisplay( this, 'a')">
<div id="a">
ここを表示したり消してみたり？
</div>
<script type="text/javascript">

function changeDisplay( btn, element ){
if( typeof( element ) == 'string' ) element = document.getElementById( element );
var f = element.style.display == 'none';
btn.value = f? '消す': '続き';
element.style.display = f? 'block': 'none';
}
</script>
onClickはすすめないけど・・・。

- 0
- 件

通報する

この回答へのお礼

_pipi_さん、ご丁寧に追加レスありがとうございます。
更に、スクリプトまで記載していただき重ねてお礼申し上げます。
＞ここを表示したり消してみたり？
そのとおりです。
しかし、表示した後再度表示させるためのボタンの値
btn.value = f? '消す': '続き';
の、'続き'も引数として渡していまして
時には、「続き」時には、「English」
となるようにしています。
質問をした当初の目的は、一つでも引数を減らせないものかということ、及び、Thisというobjectの仕組みを理解したかったことです。
お陰をもちまして、かなり理解が深まったつもりです。
重ねてお礼申し上げます。
もし、更にご返事いただけるのなら、
＞onClickはすすめないけど・・・。
この理由を教えていただけないものでしょうか。
ブラウザの対応のことでしょうか。

通報する

お礼日時：2008/12/21 17:45

No.3

回答者： yambejp
回答日時：2008/12/21 14:17

引数thisを省略する意義がわかりません

結局効率化にもなっていないし、ソースもみにくくなっていて
メリットもよくわかりません。
ブラウザごとの対応までかんがえると、thisを使う選択肢が
妥当だとおもいますが・・・

ただし、ちょっと考え方をかえるとできないことはありません。
つまりinputタグにonclickを書く場合、単にユーザー関数を呼び出している
だけなので自分自身は引数でわたすひつようがありますが、
メソッドとして指定するとメソッドのオブジェクトとして、thisは
引数でなくても参照できるようになります。
ただこれも、書き方としてはけして効率的なものにはなりませんが
jsの別ファイル化をすすめるにあたっては有効な手段です。

- 0
- 件

通報する

この回答へのお礼

yambejpさん、レスありがとうございます。
＞結局効率化にもなっていないし、ソースもみにくくなっていて
＞メリットもよくわかりません。
＞ブラウザごとの対応までかんがえると、thisを使う選択肢が
＞妥当だとおもいますが・・・
貴重なご意見ありがとうございます。
メリットは、ただ、htmlで指定するときの引数を一つでも減らそうと思いまして、
あまりメリットでないようですね。
ブラウザごとの対応を考えると、thisの方が良いということですか。
しっかりと参考にさせていただきます。
どうもありがとうございまいました。

通報する

お礼日時：2008/12/21 17:31

No.2

回答者： _pipi_
回答日時：2008/12/21 09:27

＃１です。

第１引数は、thisじゃなくてeventだった！
なので呼ばれた関数からは
var element = event.target || event.srcElement;

- 0
- 件

通報する

この回答へのお礼

_pipi_さん、早速レスありがとうございました。
できました。
しかし、
<input type=button value="続き" onClick="ChngLang(this,'CmntCrab2')">
を、２回以上使うと２回目以降は、sourceIndexの値をうまく取得してくれないようです。
＞しかし、第１引数には、そのエレメント(this)を指定していくべき
＞だと教わっています。だからそのままが良いのかも。
と、いうことですのであまり深入りしないようにします。
htmlが少しでもスマートにかけるかなと思い質問しました。
どうもありがとうございました。

以下試行したソースです。
ChngElmは、その内容を表示、非表示させるdivのid名です。
function ChngLang(ChngElm){
var ThisElm = event.target || event.srcElement;
if(ThisElm.value!="消す"){
if(!ElmValue[ThisElm.index]){
ElmValue[ThisElm.sourceIndex]=ThisElm.value;
}
ThisElm.value="消す";
document.getElementById(ChngElm).style.display = "block";
}else{
ThisElm.value=ElmValue[ThisElm.sourceIndex];
document.getElementById(ChngElm).style.display = "none";
}
}