• ベストアンサー

フォーカス移動のタイミング

<html> <head> <script type="text/javascript"> <!-- function getelementid(event){ try { return event.srcElement.id; } catch ( e ) { return event.target.id; } } function lostfocus(event){ elem_id = getelementid(event); elemid = elem_id.replace("1","2"); document.getElementById(elemid).style.visibility = "hidden"; } function tuikabuttonhyouji(event){ elem_id = getelementid(event); document.getElementById(elem_id).style.visibility = "visible"; } function tuikabutton(event){ elem_id = getelementid(event); elemid = elem_id.replace("1","2"); document.getElementById(elemid).style.visibility = "visible"; } --> </script> </head> <body> <textarea rows="1" id="test1" onblur="lostfocus(event);" onDblClick="tuikabutton(event);"></textarea> <input id="test2" style="visibility: hidden;" type="button" value="click" onFocus="tuikabuttonhyouji(event);"> </body> </html> 実装したい機能を部分的に抜き出した部分のソースが上の部分です。 実装したい機能しては、 ・テキストエリアをダブルクリックしたらclickボタンを表示 ・テキストリアからフォーカスが外れたらclickボタンを非表示にする ・ただし、フォーカスの移動先がclickボタンなら非表示にしない なので上記のように書いてみたのですがうまくいきません。 何かいい案がありましたらよろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

>なので上記のように書いてみたのですがうまくいきません。 ブラウザによって挙動がいろいろなので、どのようにうまくいかないのか(書いてないので)わかりませんが、多分、次のような点でうまくいかないという質問なのでしょうか? test2のfocus時にtest1のblurが発生しているので、(test1のblurの方が先に処理される)そこで一度非表示にするとtest2のfocusが失われるので、test2が表示されなかったりする。または、表示されても、フォーカスが無い状態で表示される。(ブラウザにより異なる) あるいは、tesu2がfocusを失ったときの処理がコーディングされていないので、違うところにフォーカスがいってもtest2が表示されたままとなる。 focusイベントはバブリングしないので、それぞれに設定しないとならないみたいですが、フォーム外へフォーカスが移った時も拾わねばならないので、結局blurも全部設定しないとならないみたいですね。 あと、idのtest1→test2の対応を1→2に変換することでとっているのは、このようなテキストエリアとボタンの組み合わせが複数あるという意味でしょうか?(勝手にそう想定して、idは「set○○○#」(○○○は任意の文字列、#は1又は2)で対応するものと仮定しました) んで、とりあえずこんな感じ? *ブラウザ外をクリックしたときなどの挙動はブラウザによって異なるようです。(blurが発生するものとしないものがある。IE、FFは発生するがOperaはダメみたい) *いっぱいイベントをつけるのが面倒なので、ボタン表示はダブルクリックではなく、テキストエリアにフォーカスが移れば表示するようにしてあります。 *ついでに、処理は全部同じfunctionでやるようにしています。 <html> <head> <script type="text/javascript"> <!-- function focuscheck(evt) { var t = evt.target || evt.srcElement; var s = evt.type, id = t?t.id:null, f; if (id.match(/^set.+?([12])$/)) { f = RegExp.$1, id = id.replace(/.$/,'2'); if (this.timer && this.id==id) { clearTimeout(this.timer); this.timer = null; } if (document.getElementById(id)) { if (s=='focus') { set(id, 'visible'); } else { this.id = id; this.timer = setTimeout(function(){set(id,'hidden')},50); } } } function set(id, attr) { document.getElementById(id).style.visibility = attr; } } --> </script> </head> <body> <textarea rows="1" id="set_a1" onfocus="focuscheck(event)" onblur="focuscheck(event)"> </textarea> <input id="set_a2" type="button" value="click" onfocus="focuscheck(event)" onblur="focuscheck(event)" style="visibility:hidden;"> <p> <textarea rows="5" id="set_b1" onfocus="focuscheck(event)" onblur="focuscheck(event)"> </textarea> <input id="set_b2" type="button" value="click" onfocus="focuscheck(event)" onblur="focuscheck(event)" style="visibility:hidden;"> <p> <textarea rows="3" id="set_c1" onfocus="focuscheck(event)" onblur="focuscheck(event)"> </textarea> <input id="set_c2" type="button" value="click" onfocus="focuscheck(event)" onblur="focuscheck(event)" style="visibility:hidden;"> </body> </html>

shaka001
質問者

お礼

お礼が遅くなってしまい申し訳ありません。 まさしく自分が求めていた動きです。ただ、入力待ちの縦棒(キャレット?でしたっけ)がIEでは表示されないというのが残念です。でも、動きとしては完璧なのでありがとうございました。

その他の回答 (3)

回答No.3

'Handlers': function ( evt ) { var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/; if( 'dblclick' == evt.type ) { if( e.id == 'test1' ) this.buf = e; document.getElementById( 'test2' ).style.visibility = "visible"; document.getElementById( 'test2' ).focus(); return; } if( /*@if (@_jscript) 'focusout' @else@*/ 'blur' /*@end@*/ == evt.type ) { if( this.buf ) { return; } } if( /*@if (@_jscript) 'focusin' @else@*/ 'focus' /*@end@*/ == evt.type ) { if( this.buf && e.id == 'test2' ) { this.buf = null; return; } } if( 'click' == evt.type ) { if( e.id == 'test1' ) return; if( e.id == 'test2' ) { alert("押したわね"); return; } } document.getElementById( 'test2' ).style.visibility = "hidden"; }, このぶぶんを、ごねごねしてたら、できるのではないだろうか? なげやりで、ごめん。ぺーじがうつったら、けすようにしたけど たに、へいがいが・・・。

回答No.2

やっぱり、というか、みすをはっけん!   hoge.Detach( window, 'unload', hoge.Handlers, false ); を   hoge.Detach( window, 'unload', hoge.unload, false ); にです。

回答No.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>test</title> <body> <form action="#" name="a"> <p> <textarea rows="1" id="test1"></textarea> <input id="test2" style="visibility: hidden;" type="button" value="click"> </p> </form> <script type="text/javascript"><!-- //@cc_on var hoge = {  'Handlers': function ( evt ) {   var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;   if( /*@if (@_jscript) 'focusout' @else@*/ 'blur' /*@end@*/ == evt.type ) {    this.buf = ( 'test1' === e.id ) ? e: null;    return;   }   if( /*@if (@_jscript) 'focusin' @else@*/ 'focus' /*@end@*/ == evt.type ) {    if( this.buf && e.id != 'test2')     document.getElementById( 'test2' ).style.visibility = "hidden";    return;   }   if( 'dblclick' == evt.type ) {    if( e.id == 'test1' )     document.getElementById( 'test2' ).style.visibility = "visible";    return;   }      if( 'click' == evt.type ) {    if( e.id == 'test2' )     alert("押したわね");    return;   }     },      'unload': function (evt) {   hoge.Detach( document, /*@if (@_jscript) 'focusout' @else@*/ 'blur' /*@end@*/, hoge.Handlers, true );   hoge.Detach( document, /*@if (@_jscript) 'focusin' @else@*/ 'focus' /*@end@*/, hoge.Handlers, true );   hoge.Detach( document, 'dblclick', hoge.Handlers, false );   hoge.Detach( document, 'click', hoge.Handlers, false );   hoge.Detach( window, 'unload', hoge.Handlers, false );  },    'Attach': function ( target, type, listener, useCapture ) {    return target./*@if (@_jscript) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ type, listener, useCapture);  },  'Detach': function (target, type, listener, useCapture) {    return target./*@if (@_jscript) detachEvent('on' + @else@*/ removeEventListener(/*@end@*/ type, listener, useCapture);  },  'Initialize': function () {    this.Attach( document, /*@if (@_jscript) 'focusout' @else@*/ 'blur' /*@end@*/, this.Handlers, true );    this.Attach( document, /*@if (@_jscript) 'focusin' @else@*/ 'focus' /*@end@*/, this.Handlers, true );    this.Attach( document, 'dblclick', this.Handlers, false );    this.Attach( document, 'click', this.Handlers, false );    this.Attach( window, 'unload', this.unload, false );   } }; hoge.Initialize( ); //--> </script> ぜんかくくうはくは、はんかくに。 かいておいてなんなんだけど、これでいいのか わからなくなってしまいました。  いきおいだけでかいてみましたが・・・。 ちからつきた。

shaka001
質問者

お礼

回答ありがとうございます。 コードを理解するのに時間がかかってしまいました。 これはこれで素晴らしいのですが、この書き方はこのページ以外にフォーカスが移った場合はclickボタンは表示されたままではないでしょうか? なので、テキストエリアのフォーカスロストイベントでdocument.getElementById( 'test2' ).style.visibility = "hidden"; を実行し、その後なんとかしてclickボタンを表示したり非表示にしたりできないかと考えています。

関連するQ&A

  • このプログラムを改善してくれませんか?。

    今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか?。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>

  • ドロップダウンメニューを短縮したい

    今ドロップダウンメニューを作っていて、メニューを大量に作りたい時に、下に添付してあるプログラムでは膨大になりすぎて入力がしんどいです。 ドロップダウンメニューには他にも様々なプログラム表記があると思います。ですので、メモ張にプログラムを貼ったら下と似たようなプログラムができ、なおかつこんな長ったらしいプログラムじゃなくても、こうすれば短くできる、などの知恵を持っていらっしゃる方がいらっしゃったら、是非ともご教授願えないでしょうか?。 できればプログラムで回答してもらえるとありがたいです。よろしくお願い致します。 <script language="javaScript"> function overL0(){ document.all("L0").style.backgroundColor="yellow"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function offL0(){ document.all("L0").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="hidden";document.all("si1").style.visibility="hidden";document.all("si2").style.visibility="hidden"; } function overL1(){ document.all("L1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible"; } function offL1(){ document.all("L1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible"; } function overS1(){ document.all("S1").style.backgroundColor="yellow"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function offS1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("S1").style.visibility="visible";document.all("si1").style.visibility="visible";document.all("si2").style.visibility="visible"; } function oversi1(){ document.all("si1").style.backgroundColor="yellow"; document.all("si1").style.visibility="visible"; } function offsi1(){ document.all("S1").style.backgroundColor="#afeeee"; document.all("si1").style.visibility="visible"; } function oversi2(){ document.all("si2").style.backgroundColor="yellow"; document.all("si2").style.visibility="visible"; } function offsi2(){ document.all("si2").style.backgroundColor="#afeeee"; document.all("si2").style.visibility="visible"; } </script> <body> <div id="L0" style="position:relative;background-color:#afeeee; width:1500;height:30" onMouseOver="overL0()" onMouseOut="offL0()"> </div> <div id="L1" style="position:relative;background-color:#afeeee; width:150;height:30" onMouseOver="overL1()" onMouseOut="offL1()"> name1 </div> <div id="S1" style="position:absolute;top:45;left:160;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="overS1()" onMouseOut="offS1()"> name2 </div> <div id="si1" style="position:absolute;top:45;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi1()" onMouseOut="offsi1()"> <a href="http://www.google.co.jp/" target="blank" target="c">A</a><br> </div> <div id="si2" style="position:absolute;top:75;left:310;background-color:#afeeee; width:150;height:30;visibility:hidden;" onMouseOver="oversi2()" onMouseOut="offsi2()"> <a href="http://www.google.co.jp/" target="blank" target="c">B</a><br> </div> </body>

  • スマホでフォームにフォーカスする方法

    スマホでフォームにフォーカスする方法についてです。 ページ読み込み終了時に、 特定の入力フォームに自動でフォーカスしたいのですが、 うまくいきません。 通常、PCのブラウザだと以下のようにするとフォーカスするのですが、 スマホ(iPhone等)では動作しません。 $(document).ready( function() {  $("#f1").focus(); }); もしくは、 window.onload=function(){ var elem = document.getElementById("f1"); elem.focus(); } ※f1 は input の id です。 なにか回避策や対処方法はありませんでしょうか? よろしくお願いいたします。

  • jabascriptの表示・非表示について

    初心者です。 このタグでは、最初から「ここを表示する」が表示されるのですが、最初は表示されずに、「表示」ボタンを押すと初めて表示されるようにするにはどのようにすればいいのでしょうか。。 <p> <a href="#" id="link_view2" onClick="toggle_view2();return false;" style="display:none;">表示</a> <a href="#" id="link_hidden2" onClick="toggle_hidden2();return false;">非表示</a> </p> <div id="area_hoge2"> <p>ここを表示する</p> </div> <script language="JavaScript" type="text/javascript"> <!-- var elem2_1 = document.getElementById("area_hoge2"); var elem2_2 = document.getElementById("link_view2"); var elem2_3 = document.getElementById("link_hidden2"); function toggle_view2() { elem2_1.style.display = ""; elem2_2.style.display = "none"; elem2_3.style.display = ""; } function toggle_hidden2() { elem2_1.style.display = "none"; elem2_2.style.display = ""; elem2_3.style.display = "none"; } --> </script> 参考 http://pentan.info/javascript/sample/view_hidden.html 詳しい方お教えください<m(_ _)m>

  • ブログでonClickを2つ以上並べると動かない

    ブログ上のhtmlタグについて質問です。"onClick"のタグを1つ張ると動くのですが、2つ以上並べると動かなくなります。ブログはseesaaブログを使っています。 ↓動く <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> ↓動かない <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> <span onClick="document.all.item('moji2').style.visibility='visible'" onClick="document.all.item('moji2').style.visibility='hidden'"> クリックする文字 </span> <div ID="moji2" onClick="document.all.item('moji2').style.visibility='hidden'" style="visibility:hidden;"> この文字をクリックすると消えます </div> よろしくお願いします。

  • これは何をするスクリプトですか?

    <head> <script type="text/javascript"> <!-- function loading() { if (document.getElementById){ document.getElementById('load').style.visibility = 'hidden'; } else { if (document.layers){ document.layers['load'].visibility = 'hidden'; } else { document.all('load').style.visibility = 'hidden'; }}} // --> </script> </head> <body onload="loading()"> 詳細は略して書いています。 プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。 皆様には簡単かとは思いますが、よろしくお願いします。

  • onMouseOverの適応範囲

    困ってしまい質問させていただきます。 <div>  <a href="t1.html" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">show</a> </div> <div id="id1" onMouseOver="javascript:document.all('id1').style.visibility='visible';" onMouseOut="javascript:document.all('id1').style.visibility='hidden';">  <a href="image.gif" onMouseOver="javascript:document.writeln(document.all('id1').style.visibility)">イメージ</a> </div> 以上のhtmlでは、「イメージ」にマウスを持っていくと、hiddenと表示されてしまいます。 一度も<div id="id1"></div>から離れていないため、visibleと表示されると思っているのですが、<div></div>の中であっても、onmouseOutが実行されてしまうのでしょうか? ブラウザはIEを利用しています。 どうか宜しくお願いします。

  • 画像の座標位置取得

    javascriptの勉強を始めたばかりで、どうしてもわからないことがあるので質問させてください。(まだ初めて一週間程度の初心者です…) マウスの座標を取得するのはなんとなくわかったのですが、画像の座標をどうやって取得すればいいのかがわかりません。(マウスはevent.offsetで取得してるのでそれに合わせたい) 例えば… function lyrGetTop(lyr){ return( parseInt( document.getElementById(lyr).style.pixelTop ) ); } で、画面全体の位置からの座標を取得するのはできたのですが、ブロック内(?)の位置から取得することができません…。 どのようにすればevent.offsetでのマウスの座標ようにブロックを基準とした座標を取得することができますか? それから、シューティングゲームの自機が弾を連射するようなアルゴリズムがわかりません。 <html> <head> <title></title> <script language="JavaScript"><!-- y = 450; interval = 20; function moveBall(){ y = y - interval; document.getElementById("ball").style.pixelLeft = getlyrleft("ber") + 24; document.getElementById("ball").style.pixelTop = y; document.getElementById("ball").style.visibility = "visible"; if( (y < 10) ){ document.getElementById("ball").style.visibility = "hidden"; document.getElementById("ball").style.pixelTop = getlyrtop("ber"); return 0; } } function getlyrtop(lyr){ return(parseInt(document.getElementById(lyr).style.pixelTop)); } function getlyrleft(lyr){ return(parseInt(document.getElementById(lyr).style.pixelLeft)); } // --></script> </head> <body onclick="setInterval('moveBall()',1)"> <img src="bb01.gif" id="ball" style="position:absolute; visibility:hidden" left:0px;top:16px;"> <img src="bb03.gif" id="ber" style="position:absolute; left:445px; top:459px;"/> </body> </html> これだと、連射どころか、二回目のクリックに反応すらしないんです…。 どうかご教授お願いします。

  • javascript について追加の質問

    質問NO6591909=3/14 10:59の追加の質問です。 素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね? IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか?(function fx()を9つ別々に書くんでしょうか?・・・・・・)よろしくお願いいたします。 因みにここからhtml↓(さっきも書きましたが、また書いておきます。) <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>

  • クイズの解説ボタンをつけて表示非表示を切り替えたい

    1.前提・実現したいこと クイズ問題の下に解説ボタンをつけて表示非表示を切り替えたい 発生している問題・エラーメッセージ clickBtn2 is not defined 該当のソースコード <サンプルコード> ------------------------------ <input type="button" value="解説" onclick="clickBtn2()" /> <p id="p2">テスト1</p> <script> //初期表示は非表示 document.getElementById("p2").style.visibility ="hidden"; function clickBtn2(){ const p2 = document.getElementById("p2"); if(p2.style.visibility=="visible"){ // hiddenで非表示 p2.style.visibility ="hidden"; }else{ // visibleで表示 p2.style.visibility ="visible"; } } </script> ----------------------------- 自分で調べたことや試したこと ------------------- <h2>解説</h2> <div id="text_k"></div> <input type="button" value="解説" onclick="clickBtn2()"/> <script type="text/javascript"> /問題と解答 const qa = [ {q:"イルカを漢字で書くとどれ?",a:["海豚","海牛","河豚","河豚"],c:0,k:"くじら目はくじら亜目の小型海獣の総称。からだは紡錘(ぼうすい)形で、前肢はひれとなる。群れをなして泳ぎ、しばしば船について走る。マイルカ・ネズミイルカなど種類が多い。"}, //問題表示 QA.prototype.quiz = function() { //問題 document.getElementById("text_q").innerHTML = (this.mondai_no + 1) + "問目:" + this.mondai_data[this.mondai_no].q; //この問題の選択肢の数は自動判断(選択肢は何個でもOKです) var answer_count=this.mondai_data[this.mondai_no].a.length; //選択肢 var s = ""; for (var n=0;n<answer_count;n++) { s += "【<a href=&#039;javascript:test.answer(" + n + ")&#039;>" + (n+1) + ":" + this.mondai_data[this.mondai_no].a[n] + "</a>】"; } document.getElementById("text_s").innerHTML = s; document.getElementById("text_k").innerHTML= this.mondai_data[this.mondai_no].k; } QA.prototype.clickBtn2 =function() { //初期表示は非表示 document.getElementById("text_k").style.visibility ="hidden"; const text_k = document.getElementById("text_k"); if(text_k.style.visibility=="visible"){ // hiddenで非表示 text_k.style.visibility ="hidden"; }else{ // visibleで表示 text_k.style.visibility ="visible"; } } よろしくお願いします。

専門家に質問してみよう