• ベストアンサー

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>とかがつかわれているとうれしいです。

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

  • ベストアンサー
  • pick52
  • ベストアンサー率35% (166/466)
回答No.1

あまり制度高くないような感じですが作ってみました。 <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> バグとかあったらすみません。 もっと効率のいい方法はないかな。

sohoshoshi
質問者

お礼

丁寧にありがとうございました！！！ 試してみましたがほんとにのぞんでいたものができていて・・・ ありがとうございました！

その他の回答 (3)

回答No.4

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>

sohoshoshi
質問者

お礼

くじの機能までつけてくださって・・・ ありがとうございました！！！

回答No.3

> あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜ ランダムに表示を行えばいい、、、といえば簡単なんですが。 作ってみました。 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>

sohoshoshi
質問者

お礼

とてもくわしく丁寧で勉強になりました！！ ありがとうございました！！

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

こんな風にすると汎用性があります <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>

sohoshoshi
質問者

お礼

ボタンいっぱいあるのにしっかり作動してすごいです！ ありがとうございました！！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScript表示切替の問題

    ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>

  • 複数ボタンのクリックイベント

    JavaScriptのイベントなのか変数のスコープなのかで質問がございます。 （一番下に全ソースを貼りました。見づらくて申し訳ありません。） htmlに複数の似た名前のボタンがあります。 名前：button_n (n = 0 to 9) 押されたボタンに応じた処理を登録しようと思い、下記を 9個書いたところ 望んだ動きをしました。 document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } ...... document.getElementById('button_'+9).onclick = function() { clicked(9); } これでは芸がないので、添字の部分を変数にし、下記のようにしたところ for (i=0; i<10; i++) { 　　 document.getElementById('button_'+i).onclick = function() { clicked(i); } } どのボタンを押しても動きません。 私の認識、以下です。 　・0～９のイベントは正しく登録されている。 　・しかし、全てがchecked(10)を呼んでいる 質問１ 　これを回避する方法と、その対処理由を教えて頂きたくお願い致します。 　 質問２（オプション） 　参考になる資料を教えていただければ幸いです。 　例）サイ本のどこを読めばいいよ。とか、このURLがわかりやすいよ。等 よろしくお願い致します。 ■ソース <!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"></head> <body> <h2>所望の動きをする</h2> <input type="button" id="button_0" value="0"> <input type="button" id="button_1" value="1"> <h2>所望の動きをしてくれない</h2> <p></p> <input type="button" id="button_2" value="2"> <input type="button" id="button_3" value="3"> <script> (function() { document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } /* 配列の最後の添字が使われる気がする。　*/ for (i=2; i<4; i++) { 　　 document.getElementById('button_'+i).onclick = function() { clicked(i); } } function clicked(n) { var btn = document.getElementById('button_' + n); console.log(btn.value); alert(btn.value); } })(); </script> </body><html>

  • ボタンに書かれている文字の入れ替え

    ２つのボタンのどちらを押しても、ボタンに書かれているアルファベットが入れ替わるようにしたいのですが、うまくいきません。 alert(obj1)、alert(obj2)などとして、A,Bともに読み込まれているようなのですが、alert(tmp)の時はundefinedがでます。 どこが間違っているのかよろしければ教えてください。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>勉強中</title> </head> <body> <script> function change_alphabet() { var tmp; var obj1 = document.getElementById("button_1").value; var obj2 = document.getElementById("button_2").value; // alert(obj1); // alert(obj2); tmp = obj1.innerHTML; // alert(tmp); obj1.innerHTML = obj2.innerHTML; obj2.innerHTML = tmp; // alert(obj2); } </script> < input type = "button" id = "button_1" value = "A" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > < input type = "button" id = "button_2" value = "B" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > <body> </html>

  • ラジオボタンとフォーム検索の結び付け

    スマホ用にゲームの攻略サイトを作りたいと思っています。 ■やりたいこと■ 値段はわかっているが名前がわからないアイテムの判別。 まずラジオボタンで「武器」か「防具」を選びます。 そして値段を入れると 「武器・600」＝勇者の剣 「防具・600」＝盾 といったように選んだラジオボタンによって同じ数字でも 表示結果を変えたいと考えています。 ラジオボタン「武器」を選ぶと検索用ボタン「button_1」が表示される。 ラジオボタン「防具」を選ぶと検索用ボタン「button_2」が表示される。 button_1と2の切り分けによってfunctionの切り分けを行っている状態です。 ■問題点■ 「防具」を押す→600を入力→「盾」が表示される→「武器」を押す→「勇者の剣」が表示されてしまう。 チェックボックスの選択を変えても表示結果は再度検索するまでそのまま、 もしくはチェックボックスを選び直した際は前回入力した数値は消えるなど対策を取りたいです。 そもそも他にもっといいやり方があるなど改善案をご教授いただきたいです。 よろしくお願いします。 【HTML】 <body> <div class="top_form"> <form name="test"> <label><input type="radio" name="radio_btn" value="buki" onclick="func();" checked="checked" />武器</label> <label><input type="radio" name="radio_btn" value="bougu" onclick="func();" />防具</label><br> <input id="test_form" type="tel" name="num"> <input id="button_1" type="button" value="button_1" onClick="func()"> <input id="button_2" type="button" value="button_2" onClick="func2()"> </form> </div> <div id="result"></div> </body> 【CSS】 <style> .top_form { width:300px; margin:0 auto; margin-top:30px; } #test_form { width:250px; height:30px; font-size:14px; margin-top:14px; } #button_1 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; } #button_2 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; background-color:#36C; } #result { border:solid 1px #666666; margin:0 auto; height:50px; width:200px; font-size:20px; line-height:50px; text-align:center; margin-top:30px; } </style> 【javascript】 <script> function func() { radio = document.getElementsByName('radio_btn'); if (radio[0].checked) { //button_1が出る document.getElementById('button_1').style.display = ""; document.getElementById('button_2').style.display = "none"; } else if (radio[1].checked) { //button_2が出る document.getElementById('button_1').style.display = "none"; document.getElementById('button_2').style.display = ""; } var url = ""; if (document.test.num.value == "600") { url = "勇者の剣"; } document.getElementById('result').innerHTML = url; } window.onload = func; function func2() { radio = document.getElementsByName('radio_btn'); var url = ""; if (document.test.num.value == "600") { url = "盾"; } document.getElementById('result').innerHTML = url; } </script>

  • 下記コードの実行方法について質問です。

    問題のコードは下記ですが、 bodyタグに onLoad="firstFunc()" と書かずに実行したいのですが、 スマートな方法はないでしょうか？ よろしくお願いいたします。 <script type="text/javascript"> function firstFunc(){ var aFunc = document.getElementById('btn'); aFunc.onclick = function(){ alert('りんご'); } } </script> </head> <body onLoad="firstFunc()"> <button id="btn" name="ボタン">getElementByIdでonclickのイベントを追加できる。</button> </body>

  • CSSでのボタンのエフェクト

    数字を小さい順にタップしていくコードなのですが この状態だと一度押されたものは背景が変わり押せなくなります ですがCSSでボタンのデザインを変えると押したかどうかわからなくなってしまいます コードは以下の通りです <body> <h1>小さい数字からタッチ!</h1> <p>Time: <span id ="time">0.0</span> sec. </p> <div id="board"> <input type="button" id="button_0" value="?" onclick="touched(0);"> <input type="button" id="button_1" value="?" onclick="touched(1);"> <input type="button" id="button_2" value="?" onclick="touched(2);"><br> <input type="button" id="button_3" value="?" onclick="touched(3);"> <input type="button" id="button_4" value="?" onclick="touched(4);"> <input type="button" id="button_5" value="?" onclick="touched(5);"><br> <input type="button" id="button_6" value="?" onclick="touched(6);"> <input type="button" id="button_7" value="?" onclick="touched(7);"> <input type="button" id="button_8" value="?" onclick="touched(8);"><br> </div> <p><input type="button" value="start!" onclick="timerStart();"></p> <script> var currentNum; var timet; var startTime; var isPlaying = false; function timerStart() { initBoard(); currentNum = 0; startTime = (new Date()).getTime(); if (!isPlaying) { isPlaying = true; runTimer(); } } function initBoard() { var nums = [0,1,2,3,4,5,6,7,8]; var num; var btn; for (var i=0; i<9; i++) { num = nums.splice(Math.floor(Math.random() * nums.length), 1); btn = document.getElementById('button_' + i); btn.value = num[0]; btn.disabled = false; } } function touched(n) { var btn = document.getElementById('button_' + n) if (btn.value == currentNum) { btn.disabled = true; currentNum++; } if (currentNum == 9){ clearTimeout(timer); isPlaying = false; alert('Your Score: ' + document.getElementById('time').innerHTML); } } function runTimer() { document.getElementById('time').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(1); timer = setTimeout(function() { runTimer() ; }, 100); } </script> </body> CSSは #board > input { height: 60px; width: 90px; margin-right : 5px; margin-top : 5px; background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069); background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069)); border: 1px solid #DDD; color: #FFF; padding: 10px 0; } ですどうすればデザインの変更を保ったまま押されたときに背景を変えることができますか？

  • JavaScriptでIE上のボタンクリック

    JavaScriptの初心者でIE上で表示されたボタンをクリックしたいのですが、2つのボタンのうち1つをクリックしたいです。 「document.all("Buttonok").click();」,「document.getElementById("Buttonok").click();」と記入してみたのですが、エラーとなります。 下記のようなボタンをJavaScriptで押すにはどうしたらいいのでしょうか？ どなたかすいませんがご教授ください。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ボタンのHTML ※formで囲まれてないです。 <table border="0" cellspacing="0" cellpadding="0" width="150"> <tr> <td width="50%"> <div id="Button"> <input type="buttonok" value="OK" class="Button" onclick="onClk("1");" /> </div> <div id="Button"> <input type="buttonng" value="NG" class="Button" onclick="onClk("0");" /> </div> </td> </tr> </table>

  • javascript クリックで複数の関数の実行

    下のようにボタンをクリックした際にvib1()、vib2()を連続して実行しようとすると、1つ目のvib1()が実行されず、vib2()だけが実行されます。vib1()、vib2()を連続して実行する方法はないでしょうか。 <html> <head> <title>バイブレーションテスト</title> <script language="javascript" type="text/javascript"> function vib1() { target = document.getElementById("output"); target.innerHTML = "Penguin1"; navigator.vibrate([600,100]); } function vib2() { target = document.getElementById("output"); target.innerHTML = "Penguin2"; navigator.vibrate([300,100]); } </script> </head> <body> <input type="button" value="バイブレーション" onclick="vib1();vib2();"/><br /> <br /> <div id="output"></div> </body> </html>

  • ボタンを押すたびに画像を切り替えるには？

    まずソースを載せます↓ <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-type" content="text/html; charset=shift-jis"> <title>ボタンを押すたびに画像を表示します</title> <body bgcolor="#FFFFFF"> <script type="text/javascript"> function func1(str) { document.write('<img src="c:/MyImage/dog1.jpg" width="104" height="91" />'); } function func2(str) { document.write('<img src="c:/MyImage/dog2.jpg" width="104" height="91" />'); } function func3(str) { document.write('<img src="c:/MyImage/dog3.jpg" width="104" height="91" />'); } function func4(str) { document.write('<img src="c:/MyImage/dog4.jpg" width="104" height="91" />'); } </script> </head> <body bgcolor="#FFFFFF"> <form id="myForm" name="myForm"><p> <input type="button" value="ボタン1" name="button1"onclick="func1('dog1.jpg');"> <input type="button" value="ボタン2" name="button2"onclick="func2('dog2.jpg');"> <input type="button" value="ボタン3" name="button3"onclick="func3('dog3.jpg');"> <input type="button" value="ボタン4" name="button4"onclick="func4('dog4.jpg');"> </p></form> </body> </html> 今回の質問内容はボタンを押すたびに画像を表示するjavascriptプログラムです 画像はCドライブ直下のMyImageフォルダにdog1.jpg,,dog2.jpg,dog3.jpg, dog4.jpgを入れています なんで動かないのがわからないです 回答できたらよろしくお願いします

  • JavaScriptのストップウォッチについて

    以下のコードでストップウォッチを作りました ここまではできるのですがここに新たな仕様として ・画面を開いてから3秒後に自動でカウントする というコードを入れたいです ですからスタートボタンをなくしてストップとリセットだけにしたいです 初心者なので変なコードになっているかもしれません その時はこうした方がいい！みたいなことを言っていただけるとすごく助かります どなたかご教授お願いします HTMLコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="css/aaa.css" rel="Stylesheet" /> </head> <body> <h1>ストップウォッチ</h1> <div id="sec" style="font-size:100px;">0.00</div> <input id="btn_start" type="button" value="Start" onclick="start();"> <input id="btn_stop" type="button" value="Stop" onclick="stop();"> <input id="btn_reset" type="button" value="Reset" onclick="reset();"> <script> var sec = 0.00; var timerId; //スタートボタン function start() { timerId = setInterval(function() { sec += 0.01; document.getElementById('sec').innerHTML = Math.round(sec*100)/100; //もしも0.0で表示したければ10にすること },10); //この数字はカウントの速さ0.00表示の時は10！ } //ストップボタン function stop(){ clearInterval(timerId); } //リセットボタン function reset(){ document.getElementById('sec').innerHTML = '0.00'; sec = 0.00; } </script> </body> </html> CSSコード body { background-color:#B2B2B2; } h1 { background-color:#00EFFF; } #sec { background-color:#00EFFF; } #btn_start ,#btn_stop ,#btn_reset { margin-top:25px; background: -moz-linear-gradient(top,#BFD9E5, #63B0CF 50%,#0080B3 50%,#09C); background: -webkit-gradient(linear, left top, left bottom, from(#BFD9E5), color-stop(0.5,#63B0CF), color-stop(0.5,#0080B3), to(#09C)); border: 1px solid #DDD; color: #FFF; width: 60px; padding: 10px 0; }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する