- ベストアンサー
javascriptであるボタンを押すと他のボタンの表記が変わるというプログラムをつくりたいのですが。
モと表示された１個のボタンと穴と表示された２個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り２つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。 最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。 あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜ おねがいします！！！ 全然違うかもしれませんが、つくってみたのものっけておきます <html> <head> <title></title> <script type="text/javascript"> var moFlg = true; function func(){ if (moFlg) { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "モ"; document.getElementById("btn03").innerHTML = "穴"; moFlg = !moFlg; } else { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "穴"; document.getElementById("btn03").innerHTML = "モ"; moFlg = !moFlg; } } </script> </head> <body> <button id="btn01" type="button" " onClick="func()"> モ </button> <button id="btn02" type="button" " onClick=""> 穴 </button> <button id="btn03" type="button" " onClick=""> 穴 </button> </body> </html> ここまでです。 でもできたら<input type ～ button ～ onClick>とかがつかわれているとうれしいです。
- sohoshoshi
- お礼率58% (32/55)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
あまり制度高くないような感じですが作ってみました。 <html lang="ja"> <head> <title></title> <script type="text/javascript"> function func(t_bt){ var input = document.getElementsByTagName('input'); var button = new Array(); for(var i = 0; i < input.length; i++) { if(input[i].type == 'button') { button.push(input[i]); } } if(t_bt.value == 'モ') { var rand = Rand(button.length - 1); var flg = 0; for(var i = 0; i < button.length; i++) { if(button[i].id == t_bt.id) { t_bt.value = '穴'; } else { button[i].value = flg == rand ? 'モ' : '穴'; flg++; } } } } function Rand(n) { return Math.floor(Math.random() * n); } </script> </head> <body> <form> <input type="button" id="btn01" value="モ" onclick="func(this);"> <input type="button" id="btn02" value="穴" onclick="func(this);"> <input type="button" id="btn03" value="穴" onclick="func(this);"> </form> </body> </html> バグとかあったらすみません。 もっと効率のいい方法はないかな。
その他の回答 (3)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
No.3のRand(ids.length-1)となってますが、Rand(ids.length)としてください。(´Д ｀ ) 初期表示もランダムになったくじ引きだぁ。てやんでぃ。 <script type="text/javascript"> var ids=['btn01','btn02','btn03']; var htmls=['モ','穴']; var prize=0; function func(elm){ //当たりをクリックしたか var win=(ids[prize] && ids[prize]==elm.id); if(win){ alert('勝ち'); }else{ alert('負け'); } if(win){ Shuffle(); } } //シャッフル function Shuffle(){ var r=Rand(ids.length); for(var i=0,el;el=$(ids[i]);i++){ el.innerHTML=htmls[+(r!=i)]; } prize=r; } function $(id){return document.getElementById(id);} function Rand(n){return Math.floor(Math.random()*n);} onload=function(){ Shuffle(); } </script> </head> <body> <form action=""> <button id="btn01" type="button" onClick="func(this);"> モ </button> <button id="btn02" type="button" onClick="func(this);"> 穴 </button> <button id="btn03" type="button" onClick="func(this);"> 穴 </button> </form>
お礼
くじの機能までつけてくださって・・・ ありがとうございました！！！
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
> あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜ ランダムに表示を行えばいい、、、といえば簡単なんですが。 作ってみました。 innerHTMLの所をコメントアウトすれば、どこに当たりがでるのかわからなくなるので、簡単なくじ引きになると思います。 動作テストはFirefox2、IE7のみ。エラーチェックなし。 簡単にするために、onclickで呼び出す関数にthisを引数に付けました。 表示部分にちょっとトリックが入ってますが、 「ランダム数」と「何番目のボタンか」を比較して、trueなら0、falseなら1に変換して、配列の添え字として使う ということをしています。 > モのボタンをクリックするとそのボタンの法事は穴に変わり、残り２つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。 これについては行っていません。（忘れていたとも言う） シャッフルするところでif(!win){}を付けるか、負けのところでreturnしてください。(´Д ｀ ) <script type="text/javascript"> var ids=['btn01','btn02','btn03']; //ボタンのID var htmls=['モ','穴']; // 表示 var prize=0; // 当たり判定用 function func(elm){ //当たりをクリックしたか var win=(ids[prize]==elm.id); if(win){ alert('勝ち'); }else{ alert('負け'); } //シャッフル var r=Rand(ids.length-1); for(var i=0,el;el=$(ids[i]);i++){ el.innerHTML=htmls[+(r!=i)]; } prize=r; } function $(id){return document.getElementById(id);} function Rand(n){return Math.floor(Math.random()*n);} </script> <form action=""> <button id="btn01" type="button" onClick="func(this);"> モ </button> <button id="btn02" type="button" onClick="func(this);"> 穴 </button> <button id="btn03" type="button" onClick="func(this);"> 穴 </button> </form> <hr> <!--IDで指定せず、classでの判別--> <script type="text/javascript"> var ids2=[]; var theClass='btn'; var htmls=['モ','穴']; var prize2=0; function func2(elm){ if(!ids2.length){ Init(); } //当たりをクリックしたか var win=(ids2[prize2].id==elm.id); if(win){ alert('勝ち'); }else{ alert('負け'); } //シャッフル var r=Rand(ids2.length-1); for(var i=0,el;el=ids2[i];i++){ el.innerHTML=htmls[+(r!=i)]; } prize2=r; } function Init(){ var es=document.getElementsByTagName('*'); for(var i=0,c;i<es.length;i++){ c=es[i].className+' '; if(c.search(theClass+' ')!=-1) ids2.push(es[i]); } es=null; } // classではなくinnerHTMLで判別する場合 // <button>の中に改行が入っていると正確に判定できないかもしれません。 function Init2(){ var es=document.getElementsByTagName('*'); for(var i=0,n,h;i<es.length;i++){ n=es[i].nodeName.toUpperCase(); h=es[i].innerHTML; if( (n=='BUTTON') && (h=='モ' || h=='穴'){ ids2.push(es[i]); } } es=null; } </script> <form action=""> <button id="btn11" type="button" onClick="func2(this);" class="btn hoge">モ</button> <button id="btn12" type="button" onClick="func2(this);" class="btn page">穴</button> <button id="btn13" type="button" onClick="func2(this);" class="home btn">穴</button> <button id="btn14" type="button" onClick="func2(this);" class="btn">ぺ</button> </form>
お礼
とてもくわしく丁寧で勉強になりました！！ ありがとうございました！！
- yambejp
- ベストアンサー率51% (3827/7415)
こんな風にすると汎用性があります <html> <head> <script type="text/javascript"> window.onload=function(){ var mogura=document.getElementById("mogura"); var n=mogura.firstChild; while(n){ if(n.nodeName=="INPUT" && n.type=="button"){ n.onclick=change; } n=n.nextSibling; } } function change(){ if(this.value=="穴") return false; this.value="穴"; var n=this.parentNode.firstChild; var count=0; while(n){ if(n.nodeName=="INPUT" && n.type=="button") {count++}; n=n.nextSibling; } var target=Math.floor(Math.random() * (count-1)); var count=0; var n=this.parentNode.firstChild; while(n){ if(n.nodeName=="INPUT" && n.type=="button"){ if(n!=this) { if(count==target){ n.value="モ"; return true; } count++; } } n=n.nextSibling; } } </script> </head> <body> <div id="mogura"> <input type="button" value="モ"> <input type="button" value="穴"> <input type="button" value="穴"> <input type="button" value="穴"> <input type="button" value="穴"> <input type="button" value="穴"> <input type="button" value="穴"> <input type="button" value="穴"> <input type="button" value="穴"> </div> </body> </html>
お礼
ボタンいっぱいあるのにしっかり作動してすごいです！ ありがとうございました！！
お礼
丁寧にありがとうございました！！！ 試してみましたがほんとにのぞんでいたものができていて・・・ ありがとうございました！