JavaScriptクイズ！正解と不正解のボタンを一回ずつ押せる方法
- 質問者は、特定のJavaScriptクイズのソースコードについての質問をしています。
- 質問者は、ソースコードの中の正解と不正解のボタンを一回ずつしか押せないようにする方法を尋ねています。
- 質問者は、正解と不正解のボタンを制限するための方法を教えてほしいと頼んでいます。
- ベストアンサー
javascript クイズ
こちらの http://okwave.jp/qa/q4105194.html 回答のNo.4の回答者様のソースコードなのですが <html> <head><style>.hid{display:none} .disp{display:block}</style></head> <body> <div id="s0">Start!!<input type="button" value="click" onClick="view();$('s0').className='hid';"></div> <div id="mn"></div> <div id="s1" class="hid"> Q1.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s2" class="hid"> Q2.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s3" class="hid"> Q3.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s4" class="hid"> Q4.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s5" class="hid"> Q5.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="hz" class="hid"> はずれでした！ <input type="button" value="次に進む" onClick="nextq()"> </div> <div id="sk" class="hid"> 正解です！ <input type="button" value="次に進む" onClick="nextq()"> </div> <script> var n=3; var q=5; var f=[]; var l=[]; var c=0; var cntc=0; window.onload=function(){ for(var i=0;i<n;i++){ do x=Math.floor(Math.random()*q)+1; while(f[x]) f[x]=true;l[i]=x; } } function view(){$('s'+l[c]).className='disp';$('mn').innerHTML=c+1+"問目";} function $(o){ return document.getElementById(o); } function hazure(){ $('hz').className='disp';} function seikai(){ $('sk').className='disp'; cntc++;} function nextq(){ $('sk').className='hid'; $('hz').className='hid'; $('s'+l[c]).className='hid'; if(++c>=n) owari(); else view(); } function owari(){ $('mn').innerHTML='正解数は、'+cntc; } </script> このままですと正解と不正解のボタンがそれぞれ一回ずつ押せてしまいます これを正解、不正解のどちらか一回しか押せないようにするにはどうすればよろしいでしょうか？ よろしくお願いします。
- gomsp14
- お礼率50% (1/2)
- JavaScript
- 回答数2
- ありがとう数10
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
方法はいろいろあると思いますが、簡単そうなのは… 1）一度クリックしたら他のボタンをdisabledにする 2）「次に進む」ボタンが表示されている時は、スクリプト側で判別して 処理を行わない などなど・・・ 閲覧者にわかるという点で、1）のような方法がよいのではないでしょうか。
その他の回答 (1)
- b0a0a
- ベストアンサー率49% (156/313)
Promiseを使ってもいいかもしれませんね。 Promiseは一度解決するとそれっきりなので。
お礼
disabledを使用して解決いたしました。 回答ありがとうございました。
関連するQ&A
- javascriptで無効化
javascriptの勉強中でクイズを作っています。 3択クイズでボタン式になっていて押すとそれぞれ正解・不正解と 問題に対する解説を表示させることは出来ました。 また、次へボタンで次の問題にも進めます。 しかし、ボタンな為、何度でも押せてしまい、正解が出るまで出来る上、 hiddenで隠して正解・不正解と解説が出てしまいます。 そこで、1つのボタンを押したら残り2つのボタンを無効化して 次へボタンしか押せない状態にしたいと思っています。 <div id="s1" class="hid"> <p>hogehogehoge?</p> <a href="#" onclick="return ChDsp2('hz1','textALL');"><input type="button" value="1-1" onclick="hazure();" /></a><br /> <a href="#" onclick="return ChDsp2('hz1','textALL');"><input type="button" value="1-2" onclick="hazure();" /></a><br /> <a href="#" onclick="return ChDsp2('sk1','textALL');"><input type="button" value="1-3" onclick="seikai();" /></a> </div> <div id="hz" class="hid"> <p>不正解 ×</p> <div id="hz1" class="textALL">【解 説】hogehoge <input type="button" value="次へ" onclick="nextq();" /> <div id="sk" class="hid"> <p>正解 ×</p> <div id="sk1" class="textALL">【解 説】hogehoge <input type="button" value="次へ" onclick="nextq();" /> この様になっていますが、どうか回答を選択(ボタンを押した)したら 他の問題を押せなくし、解説を表示させたまま次へボタンを押し、 次の問題に進む方法を教えて下さい。お願いします。
- ベストアンサー
- JavaScript
- javascriptで配列の重複判定の方法について
似たような質問はありましたが、明確な答えが定まらないため質問させていただきます。 何卒、ご教授宜しくお願いします。 ■やりたいこと questionｓ配列からanswerに乱数を入れて、それをvalueに入れたいのですが、 乱数を使うと、どうしても重複が発生してしまうため、重複を回避したいのですが、 どのように記述したらよいのでしょうか？ 以下、ソースです。 <h2>問題:<span id="question_num"></h2> <input type="button" value="" id="answer_0" onclick="seikai(0)" /> <input type="button" value="" id="answer_1" onclick="seikai(1)" /> <input type="button" value="" id="answer_2" onclick="seikai(2)" /> <input type="button" value="" id="answer_3" onclick="seikai(3)" /> <script> var questions = [ { 'question': 'アメリカの首都は?', 'answer': ['ワシントン', 'ローマ', 'オタワ', '東京'], 'kotae': 'ワシントン' }, { 'question': 'イギリスの首都は?', 'answer': ['北京', 'ジュネーヴ', 'ロンドン', '東京'], 'kotae': 'ロンドン' }] var rnd; //seikai()で使う var answerNum = 4; function makequestion() { var currentNum = Math.floor(Math.random() * questions.length); document.getElementById('question_num').innerHTML = questions[currentNum]['question']; //ここから重複処理をどのようにして書けばよいかわかりません。 //例えば["東京", "ローマ", "東京", "オタワ"]などが返ってきてしまいます。 for ( var i=0; i<4; i++) { var ansrnd = Math.floor(Math.random() * answerNum); //選択肢用の乱数 var ans = questions[currentNum]['answer'][ansrnd]; //配列に入れる document.getElementById('answer_' + i).value = ans; } rnd = currentNum; } </script> 恐れ入りますが、宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- 同じ i 番目のclassを連動させることはできますか？
お世話になります <script type="text/javascript"><!-- window.onload = function() { document.getElementsByClassName = function (className) { var i, j, eltClass; var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; var objCN = new Array(); for (i = 0; i < objAll.length; i++) { eltClass = objAll[i].className.split(/\s+/); for (j = 0; j < eltClass.length; j++) { if (eltClass[j] == className) { objCN.push(objAll[i]); break; } } } return objCN; } obj0 = document.getElementsByClassName("id"); obj1 = document.getElementsByClassName("pass"); for(i=0;i<obj0.length;i++) { obj0[i].onclick = function() { obj1[i].style.display = "block"; } } } //--></script> <style type="text/css"><!-- .id { width:150px; float:left; cursor:pointer; } .pass { display:none; } .pass0 { width:100px; } --></style> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass0"> <input type="button" name="login" value="LOG IN" class="login"> </div> <div class="id">名前1</div> <div class="pass"> <input type="password" name="password" class="pass"> <input type="button" name="login" value="LOG IN" class="login"> </div> のような感じでclass("id")[0]をクリックしたらclass("pass")[0]を表示、class("id")[1]をクリックしたらclass("pass")[1]を表示・・・というふうにしたいのですがなかなかうまくいきません＞＜ 名前とパス両方を入力にしてやる方法もできますし、 それぞれのclass("id")にfunction()を振って obj0[0].onclick = function() { obj1[0].style.display = "block"; } obj0[1].onclick = function() { obj1[1].style.display = "block"; } のようなやり方もできるのはできます 後者のやり方は他の部分でもいろいろ使っているので記事やメンバーが増えるたびに新たに追加していかないといけないので***.onclick = function() { } を配列にするなどまとめてできる方法があれば教えていただきたいのですが＾＾；
- ベストアンサー
- JavaScript
- JavascriptでInputClassの表示を変えるには
以下のScriptを作りました。Tagの表示情報をScriptで変更したいのです。以下のdiv class="inC1"は変更されます。input class="inIPC2も変更したいのですが、どうもやり方が異なるようです。 申し訳ありませんがご教授願います。 <html> <head> <title>エレメントの表示</title> </head> <body> <script type="text/javascript"> function Disp_change() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inC1") div[i].innerHTML = "change1"; i++; } } function Disp_change_Class() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inIPC2") div[i].innerHTML = "change2"; i++; alert ("change2"); } } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2">連絡情報</div> </div> <script type="text/javascript"> Disp_change(); Disp_change_Class(); }; </script> </script> </body> </html> 一応動きますので確認してみてくだされば幸いです。 以上、宜しく御願い致します。
- ベストアンサー
- Java
- JavaScriptによるonClickの使い方
JavaScriptのonClickと関数の使い方で悩んでいます。 現在、divブロック表示非表示切り替えスクリプト：http://designlabolatory.blog16.fc2.com/blog-entry-139.htmlを参考に、ボタンを押して内容の表示・非表示を行いたいと思っています。 <form name="btnname"> <input type="button" name="inpname1" value="▼" onClick="openclosebtn1()"> <div id="openclose1" style="display:none;"> 内容：１ </div> <input type="button" name="inpname2" value="▼" onClick="openclosebtn2()"> <div id="openclose2" style="display:none;"> 内容：１ </div> <input type="button" name="inpname3" value="▼" onClick="openclosebtn3()"> <div id="openclose3" style="display:none;"> 内容：１ </div> </form> 上記のように１つのformの中で、複数の項目のボタンを押して表示・非表示を行うのに、 function openclosebtn1(){ } function openclosebtn2(){ } function openclosebtn3(){ } ３つの関数にそれぞれbuttonのnameとdivのidを変えて書いています。 これを、１つの関数にうまくまとめたいのですが、いまいち方法がわかりません。 JavaScript初心者で、勉強不足なのは重々承知です。 手元にある本を読んでも書き方がわかりません。 わかる方アドバイスお願いします。
- ベストアンサー
- JavaScript
- Javascriptを短くしたい
初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>
- ベストアンサー
- JavaScript
- javascriptのonclickに関数を追加？
現在、javascriptでinput要素に新しくonclick='hoge()'などの関数を追加したいのですができません。 色々調べたのですが、結局わからなかったので質問させていただきます。 何卒、ご教授宜しくお願いします。 ■やろうとしていること 下記ソースのボタンをどれかクリックしたら、 新しく、<input type="button" value="次へ" onclick="next()" />というのを<span>に 生成したいのですが、onclickが追加されずに困っております。 どのようにしたらよいのでしょうか？ちなみにtypeとvalueは生成されています。 <form name="test"> <input type="button" value="" id="answer_0" onclick="test(0)" /> <input type="button" value="" id="answer_1" onclick="test(1)" /> <input type="button" value="" id="answer_2" onclick="test(2)" /> </form> <span id="test2"></span> <script> function test(n) { ・・・ 中略 var nq = document.createElement('input'); nq.type = "button"; nq.value = '次へ'; nq.onclick = "nexｔ()"; document.getElementById('test2').appendChild(nq); } </script> 以上、宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- 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
- テンキーで「0.1」を打つと「.1」になる
HTMLページにテンキーを打つと数字が出るといったものをしたくて、検索しましたところ、参考サイトを見つけました。 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13197413368 「.」を追加したソースが下記になります。 「0.1」とテンキーを打つと「.1」になってしまいます。「0.1」になる方法を教えて下さいますか？ 宜しくお願いします。 <style type="text/css">table { border: 0px; margin: 0 auto; border-collapse: collapse; } div#cc { text-align: center; } input { font-size: 12px; margin: 0; padding: 0; } input.key { width: 32px; font-family: monospace; font-size: 12px; } </style> </head> <body> <div id="cc"> <form name="myForm" action="#"> <input name="tx1" size=24 tabindex=1 maxlength=20 value="" onClick="selecttext(this)"><br> <input name="tx2" size=24 tabindex=2 maxlength=20 value="" onClick="selecttext(this)"><br> <input name="tx3" size=24 tabindex=3 maxlength=20 value="" onClick="selecttext(this)"><br> <hr> <table> <tr> <td><input type="button" class="key" value="7" onClick="keyEvent('7')"></td> <td><input type="button" class="key" value="8" onClick="keyEvent('8')"></td> <td><input type="button" class="key" value="9" onClick="keyEvent('9')"></td> </tr> <tr> <td><input type="button" class="key" value="4" onClick="keyEvent('4')"></td> <td><input type="button" class="key" value="5" onClick="keyEvent('5')"></td> <td><input type="button" class="key" value="6" onClick="keyEvent('6')"></td> </tr> <tr> <td><input type="button" class="key" value="1" onClick="keyEvent('1')"></td> <td><input type="button" class="key" value="2" onClick="keyEvent('2')"></td> <td><input type="button" class="key" value="3" onClick="keyEvent('3')"></td> </tr> <tr> <td><input type="button" class="key" value="0" onClick="keyEvent('0')"></td> <td><input type="button" class="key" value="." onClick="keyEvent('.')"></td> <td><input type="button" class="key" value="←" onclick="oneClear()"></td> <td><input type="button" class="key" value="CA" onclick="allClear()"></td> </tr> </table> </form> </div> <script type="text/javascript"> var t; selecttext(document.myForm.tx1); function selecttext(o) { t = o; } function keyEvent(c) { t.value = (t.value=='0')? c: t.value+c; } function allClear() { t.value = ''; } function oneClear() { t.value = t.value.substring(0,t.value.length-1); } </script> </body>
- ベストアンサー
- JavaScript
- 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
補足
回答ありがとうございます。 disabledを試して見たのですが中々上手くいきません。 よろしければソース等でご教授願えませんでしょうか。