javascriptで無効化する方法

2023/08/15 23:49

このQ&Aのポイント

javascriptの勉強中でクイズを作っています。センセーショナルなタイトルとなるように、1つのボタンを押したら他の問題を押せなくし、解説を表示させたまま次へボタンを押し、次の問題に進む方法を教えてください。
クイズ作成中に問題が発生しました。ボタンを押すと正解・不正解と解説が表示されますが、他の問題も押せてしまいます。1つのボタンを押したら他の問題を押せなくする方法を教えてください。
javascriptでクイズの問題を作成中です。現在はボタンを押すと解説が表示されますが、他の問題も押せてしまいます。ボタンを押したら他の問題を無効化する方法を教えてください。

ベストアンサー

javascriptで無効化

2012/03/28 00:06

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();" /> この様になっていますが、どうか回答を選択(ボタンを押した)したら他の問題を押せなくし、解説を表示させたまま次へボタンを押し、次の問題に進む方法を教えて下さい。お願いします。

es19
お礼率100% (1/1)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

jjon-com
ベストアンサー率61% (1599/2592)

2012/03/28 01:14 回答No.1

http://okwave.jp/qa/q7279331.html の私の過去の回答ANo.1

質問者

お礼 2012/03/28 03:03

消しちゃうという発想がなかったです。 document.getElementById('s1').style.display = 'none';" で出来ました。今回はヒントになりましたので本当にありがとうございました。

関連するQ&A

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> このままですと正解と不正解のボタンがそれぞれ一回ずつ押せてしまいますこれを正解、不正解のどちらか一回しか押せないようにするにはどうすればよろしいでしょうか？よろしくお願いします。
- ベストアンサー
- 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
電卓のJavaScript
初心者で申し訳ないのですが、電卓のソースを作ってみたのですが、JavaScriptが間違っているためか「ページにエラーが発生しました」となり計算が行われません。どのように、改変すればいいのでしょうか？どうかご教授お願いします。 <html> <head> <title> 電卓 </title> <script language = "JavaScript"> count = 0; sum= 0; flag =0; list = new Array( "0", "0","0","0","0",); function clist( ) { for( i = 0 ; i < 5 ; i++ ) { list[i] =0; } } function calc1() { num = sum; clist( ); display.value = num; flag = 1; } function calc2() { num = sum; clist( ); display.value = num; flag = 2; } function calc3() { num = sum; clist( ); display.value = num; flag = 3; } function calc4() { num = sum; clist( ); display.value = num; flag = 4; } function calc5() { clist( ); } function equal() { if(flag==1) { sum=num+sum; display.value=sum; clist( ); } else if(flag==2) { sum=num-sum; display.value=sum; clist( ); } else if(flag==3) { sum=num*sum; display.value=sum; clist( ); } else if(flag==4) { sum=num/sum; display.value=sum; clist( ); } } function push0( ) { list[count] = 0; sum = list[count]; for( i = 0 ; i < count ; i++ ) { temp=1; for( j = i ; j < count ; j++ ) { temp=temp*10; } sum+ =list[i]*temp; } count+=1; display.value=sum; } function push1( ) { list[count] = 1; sum = list[count]; for( i = 0 ; i < count ; i++ ) { temp=1; for( j = i ; j < count ; j++ ) { temp=temp*10; } sum+ =list[i]*temp; } count+=1; display.value=sum; } 同様に２～９ </script> </head> <body> <hr><br> <input type = "button" value ="7" onclick = "push7()">&nbsp <input type = "button" value ="8" onclick = "push8()">&nbsp <input type = "button" value ="9" onclick = "push9()">&nbsp&nbsp <input type = "button" value ="+" onclick = "calc1()">&nbsp<br><br> <input type = "button" value ="4" onclick = "push4()">&nbsp <input type = "button" value ="5" onclick = "push5()">&nbsp <input type = "button" value ="6" onclick = "push6()">&nbsp&nbsp <input type = "button" value ="-" onclick = "calc2()">&nbsp<br><br> <input type = "button" value ="1" onclick = "push1()">&nbsp <input type = "button" value ="2" onclick = "push2()">&nbsp <input type = "button" value ="3" onclick = "push3()">&nbsp&nbsp <input type = "button" value ="×" onclick = "calc3()">&nbsp<br><br> <input type = "button" value ="0" onclick = "push0()">&nbsp <input type = "button" value ="=" onclick = "equal()">&nbsp <input type = "button" value ="C" onclick = "calc5()">&nbsp&nbsp <input type = "button" value ="÷" onclick = "calc4()">&nbsp<br><br> <br><br><hr><br>&nbsp&nbsp&nbsp <input type = "text" size ="10" name = "display">&nbsp <br><br><hr><br> </body> </html>
- ベストアンサー
- JavaScript
jqeryについて
[script] $(function() { $(".btn").on('click',function(){ Tmp=$(this).attr('id').replace('button','p'); $(".box").hide(); $("#"+Tmp).show(); }); }); [css] .box{ display:none; } [html] <p id="p1" class="box">テスト１</p> <p id="p2" class="box">テスト2</p> <p id="p3" class="box">テスト3</p> <input type="button" id="button1" value="ボタン1" class="btn" /> <input type="button" id="button2" value="ボタン2" class="btn" /> <input type="button" id="button3" value="ボタン3" class="btn" /> 上記のコードのボタン部分、表示部分を変えたいのですがうまくいかないので教ええてください。 <input type="button" id="button1" value="ボタン1" class="btn" />ここの部分を<p id="tab1 class="tab">に変更し、 <p id="p1" class="box">テスト１</p>　ここの部分を <div class="">(cssでアイテム（ul）全体を右に寄せています。) <ul> <a href="/"><li><img src="hoge/hoge1.png"><p>hogehoge</p></li></a> <a href="/"><li><img src="hoge/hoge2.png"><p>hoge</p></li></a> </ul> </div> よろしくお願いします。
- ベストアンサー
- JavaScript
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の書き方
divの中にp、 pの中にspan、 spanの中にinputがあるとして、クリックしたらそれぞれの要素のタグををalertで表示させたいとき、（例１） <div onClick="a=event.target || event.srcElement;alert(a.tagName)">div 　<p>p 　　<span>span 　　　<input type="button" value="input"> 　　</span> 　</p> </div> で良いと思います。（IE,Safri,Chrome,Opera,Firefox,Lunascapeで確認済み）ただ、onClick内をスッキリさせたいので（例２） <script> function whereYouClick1(){ 　a=event.target || event.srcElement; 　alert(a.tagName); } </script> <div onclick="whereYouClick1();">div 　<p>p 　　<span>span 　　　<input type="button" value="input"> 　　</span> 　</p> </div> とすると、FirefoxとLunascapeで動かなくなります（よね？）。苦肉の策として（例３） <script> function whereYouClick2(){ 　alert(a.tagName); } </script> <div onclick="a=event.target || event.srcElement;whereYouClick2()">div 　<p>p 　　<span>span 　　　<input type="button" value="input"> 　　</span> 　</p> </div> としたらすべてのブラウザで動いたのですが、腑に落ちません。これなら（例１）のままの方がすっきりして良かったような気がします。ここ以外でも同じスクリプトを使いまわしたいときにはfunctionを定義したいところですが、 Forefox, Lunascapeのために（例３）の書き方にならざるを得なくなると思いますが、気持ち悪いです。もっときれいな書き方はないのでしょうか。また、上の例では一旦 a=event.target || event.srcElement; としてから、 alert(a.tagName) とやっていますが、 alert(event.target.tagName || event.srcElement.tagName) とやったらIEではエラーとなりました。そんなもんなんでしょうか。基本的な事柄で申し訳ありませんが、よろしくお願いします。
- ベストアンサー
- 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
Javascriptを短くしたい
初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、以下のサンプル文のような形では、項目数が増えるとその分だけどんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。よろしくお願いします。 <script type="text/javascript">  </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記述で複数対応したい
お世話になります。下記スクリプトの改良する点を教えていただきたいです何十件と続くリストの中から選択したinputタグの中身をコピーしたいと考えています。いろいろチャレンジしているのですが、正解を導き出せず、困っています。ご教授よろしくお願いします。  function copyToClipboard() { // コピー対象をJavaScript上で変数として定義する var copyTarget = document.getElementById("copyTarget[可変する数字]"); // コピー対象のテキストを選択する copyTarget.select(); // 選択しているテキストをクリップボードにコピーする document.execCommand("Copy"); // コピーをお知らせする alert("コピーできました！ : " + copyTarget.value); }  <div class="list"><input name="url" type="text" value="https://www.aaaaaaaaaaa.com/img/2020/8/3333333.jpg" id="copyTarget1" style="width:96%;" /><input type="button" id="copy" value="クリップボードへコピーする" onclick="copyToClipboard()"></div> <div class="list"><input name="url" type="text" value="https://www.aaaaaaaaaaa.com/img/2020/8/2222222.jpg" id="copyTarget2" style="width:96%;" /><input type="button" id="copy" value="クリップボードへコピーする" onclick="copyToClipboard()"></div> 以下ループで続く...
- ベストアンサー
- JavaScript
JAVASCRIPTで、ボタンを押したら　入力項目を追加できるようにしたい。
FORMタグ内に下記のようなの入力項目があります。 JAVASCRIPTを使って、追加ボタンを押したときに、下記の部分を2個、3個と追加させたいと思っております。 (最初から複数個分の入寮力フォームを用意しておくと、見た目が良くないため、追加ボタンで随時追加するようにしたい）どのようなjavascriptを書けばよいか、ご教授願えませんでしょうか。どうぞよろしくお願い致します。 <select> <option value="　" selected="selected">選んでください</option> <option value="テスト1">テスト1</option> <option value="テスト2">テスト2</option> <option value="テスト3">テスト3</option> </select> <br class="spacer"> </div> <div class="forms"> <label>テーブル1</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル2</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル3</label> <input type="text" name="textfield" id="textfield" class="short" /> <div class="btns"> <input type="button" value="送信" /> <input type="button" value="さらに入力項目を追加する" /> <input type="button" value="クリア" /> </div>
- ベストアンサー
- JavaScript