- ベストアンサー
javascriptとhtmlでわからないとこが・・
ボタンを押すと１～９までの数字が出てくるってので 繰り返し押せるようにしたいのですが、 ボタンを押すと文字だけになり再度ボタンを押すにはブラウザの戻るを 押すことになってしまうんですけどどうしたらいいでしょうか？ <html> <head> <title>test</title> <script type = "text/javascript"> function damage(){ var a=Math.random()*10; a=Math.round(a); document.write(a); } </script> </head> <body> <form> <input type ="button"name="abc"value="1～10"onclick=damage()> </form> </body> </html> 出来れば、 出てきた数値が１０を超えると画像を切り替える方法も教えてもらえるとありがたいです。 よろしくお願いします。
- ainobakuda
- お礼率54% (47/86)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
innerHTML関数を使うとよいでしょう。 これはgetElementByIdなどで得たエレメント(タグで囲まれた部分と思えばよい)の中身を自由に書き換えるものです。 ごく古いブラウザでは動きませんが今の時代にそう問題はないでしょう。 ----- <script type = "text/javascript"> function damage(){ var a=Math.random()*10; a=Math.round(a); document.getElementById("out").innerHTML=a; //←●ココを変更 } </script> <form> <input type="button" name="abc" value="1～10" onclick=damage()> </form> <span id="out"></span> <!-- ←●ココを追加 --> ----- なおNo1さんの方法ですが、 これはプログラム部分まで含めてwriteで書き出すという方法をとっています。 しかし、その「プログラムを書き出すwrite」もプログラムの一部ですから、これを書き出すwriteが必要で…といつまでたっても終わりません。 それを回避するためには外部化は仕方がないと思います。 プログラム部分を文字列として持っておけば何とかなるのかな…。できたとしてもやたらと複雑なプログラムになりそうですが。
その他の回答 (2)
- mizuna83
- ベストアンサー率73% (22/30)
No1です。 innerHTML関数なんて便利なものあるのをすっかり忘れていました。 まぁ、それを踏まえて・・・ No2さんのソースをちょっこと変えると ボタンを押すたびに1～10の値をランダムに足し続けるというソースができます。 なので、最後に10を超えているか否かの判定をすればOKです。 サンプルでは10を超えていればalertを出します。 処理は止めていないので、止めたい場合はalertの代わりに return b; とかけば、足し算を行わないので元の値のままになります。 <html> <head> <title>test</title> <script type = "text/javascript"> function damage(){ var b =document.getElementById("out").innerHTML; if(b==""){ b=0 } var a= Math.random()*10; a=Math.round(a); var c = parseInt(a)+parseInt(b) if(c>10){ alert("10を超えました"); } document.getElementById("out").innerHTML=c; } </script> </head> <body> <form> <input type ="button"name="abc"value="1～10"onclick=damage()> <br> <span id="out"></span> </form> </body> </html>
お礼
２度目も回答してくださるとは・・・ おかげでやりたいことができました。 本当にありがとうございました。
- mizuna83
- ベストアンサー率73% (22/30)
document.write(a)しかしてないので ボタン押下後のページが数字しか表示されないわけです。 以下に書き換えてください。 また、処理上Javascriptは外だししました。 test.jsの名前で同じフォルダに配置してください。 (HTML本体) <html> <head> <title>test</title> <script type = "text/javascript" src="test.js"> </script> </head> <body> <form> <input type ="button"name="abc"value="1～10"onclick=damage()> </form> </body> </html> (外部Javascript) function damage(){ var a=Math.random()*10; a=Math.round(a); document.open(); document.write("<html>"); document.write("<head>"); document.write("<title>test</title>"); document.write("<script type = 'text/javascript' src='test.js'></script>"); document.write("</head>"); document.write("<body>"); document.write(a); document.write("<br>"); document.write("<form>"); document.write("<input type ='button'name='abc'value='1～10'onclick=damage()>"); document.write("</form>"); document.write("</body>"); document.write("</html>"); document.close(); } 精査してないので、挙動が一部おかしいですけどこれでどうでしょう。 画像に関しては参考URLが役に立ちませんか? 要は出てきた値でifで切り替えて表示すればいいのです。
補足
回答ありがとうございます。 1個のファイルにまとめることは出来ないんでしょうか？
関連するQ&A
- javascript 乱数が取得できない
はじめまして。 一月ほど前から「パズルネット ソフィア」 http://www.pori2.net/js/number/4.html というサイトでjavascriptの基礎を学んでいるのですが、乱数 を扱う段階になって自分の作成したプログラム（以下） <html> <head> </head> <body onload="Mondai()"> <form name="quiz"> <input type="text" value="" > <input type="button" value="赤" onclick="Push(0)"> <input type="button" value="青" onclick="Push(1)"> <input type="button" value="黄" onclick="Push(2)"> <input type="button" value="緑" onclick="Push(3)"> <input type="button" value="白" onclick="Push(4)"> </form> <script type="text/javascript"> <!-- var col=new Array("red","bleu","yellow","green","white"); var Rnd; function Mondai(){ Rnd=Math.floor(Math.random() * 5 ); document.quiz.element[0].value=col[Rnd]; } function Push(num){ var n=parseInt(num); if( n==Rnd ){ Mondai(); }else{ alert("違います。"); } } // --></script> </body> </html> を実行してもテキストボックス内に何の値も表示されず 、ボタンを押しても「違います。」とだけしか出てきません。 ブラウザはfirefoxを使用しており、javascriptの設定もonに なっています。 カンマや鍵括弧などの記号にも打ち間違いがないかサンプル プログラムを参考にしながら確認してみたのですが、どこにも おかしな点はありませんでした。 サンプルプログラムは下記のとおりで、こちらは正常に実行されます。 <body onload="Mondai()"> <form name="quiz"> <input type="text" value=""> <input type="button" value="赤" onclick="Push(0)"> <input type="button" value="青" onclick="Push(1)"> <input type="button" value="黄" onclick="Push(2)"> <input type="button" value="緑" onclick="Push(3)"> <input type="button" value="白" onclick="Push(4)"> </form> <script type="text/javascript"> <!-- //色名の英単語を配列に入れる var col=new Array("red","blue","yellow","green","white"); //乱数を入れる変数 var Rnd; //テキストボックスに問題文（色名）を表示する関数 function Mondai(){ //0～4までの乱数を発生させる Rnd=Math.floor( Math.random() * 5 ); document.quiz.elements[0].value=col[Rnd]; } //正誤判定関数 function Push(num){ //引数を数字に変換 var n=parseInt(num); //正解なら次の問題を表示、間違っていたらアラートを表示する if ( n == Rnd ){ Mondai(); }else{ alert("違います！"); } } // --> </script> どなたかアドバイスをいただけないでしょうか？ よろしくお願いします。
- 締切済み
- JavaScript
- JavaScriptで数値をimgに設定する
JavaScriptで 下記のソースにてランダムで出した数値を htmlの width="" height=""に 設定するには どのようにすればよいのでしょうか？ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <script> var width = Math.floor(Math.random() * 400) + 1; var height = Math.floor(Math.random() * 400) + 1; </script> <img src="hoge.jpg" alt="" width="" height=""> </body> </html>
- ベストアンサー
- JavaScript
- javascript関数について
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function extract() { var textbox = document.getElementById("barcode"); var amount = textbox.value.substr(22,3); textbox.value = amount; } </script> </head> <body> バーコード: <input type="text" id="barcode" size="64" value=""> <input type="button" value="部分取り出し" onclick="extract()"> </body> </html> 上記のソースコードでボタンを押せば22行目(先頭から数えて21番目までを削除？し22番目から25番目までを表示）するプログラムをかきましたが、ボタンを押さず表示したいのですが、どうすればいいですか？教えてください。 お願いいたします。
- ベストアンサー
- JavaScript
- スロットが変な動きをします
JavaScriptで子供用にPCで遊べるようにスロットを作りました。 ここで疑問なのですが、最初にスタートとストップボタンを画像分だけ作りましたが、 スタートを同時にしてストップだけを個別にするためにスタートボタンを１個にしたら 変な動きになりました。 色々とやってみましたが以外に苦心しています。誰か宜しくお願いします。 スタートを３個にすれば簡単なことは十分わかってはいるのですが。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <html><head><title></title> <script type="text/javascript"> var picture = new Array(3); picture[1] = new Image(); picture[2] = new Image(); picture[3] = new Image(); picture[1].src = "img/data1.jpg"; picture[2].src = "img/data2.jpg"; picture[3].src = "img/data3.jpg"; function autoChange() { function autoChange1(); function autoChange2(); function autoChange3(); } function autoChange1() { var kaiten1 = Math.round(9*Math.random()); document.initial1.src = picture[kaiten1].src; timer1 = setTimeout("autoChange1()", 100); } function autoChange2() var kaiten2 = Math.round(9*Math.random()); document.initial2.src = picture[kaiten2].src; timer2 = setTimeout("autoChange2()", 100); } function autoChange3() { var kaiten3 = Math.round(9*Math.random()); document.initial3.src = picture[kaiten3].src; timer3 = setTimeout("autoChange3()", 100); } function stop1(){ clearTimeout(timer1); } function stop2() { clearTimeout(timer2); } function stop3() { clearTimeout(timer3); } </script> </head> <form> <input type="button" value="START" onclick="autoChange()"> <img src="img/data1.jpg" name="initial1"> <img src="img/data1.jpg" name="initial2"> <img src="img/data1.jpg" name="initial3"> <br><br> <input type="button" value="STOP" onclick="stop1()"> <input type="button" value="STOP" onclick="stop2()"> <input type="button" value="STOP" onclick="stop3()"> </form> </body></html>
- ベストアンサー
- JavaScript
- 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>とかがつかわれているとうれしいです。
- ベストアンサー
- JavaScript
- Ajax ボタンが起動しない
ボタンを押しても関数が呼び出されなくて困っています。 ソースは以下のとおりです。 回答お願いします。 <html> <head><title>テスト1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var globalVar = "テスト"; function varTest(){ debugClear(); debug(globalVar); } </script> </head> <body> テスト1回目 <form> <input type="button" value="テスト開始" onclick="varTest();"/><br/> </form> </body> </html>
- ベストアンサー
- AJAX
- 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 フォームのエレメント名を変数で設定するには？
javascriptの初心者です。初めて質問させていただきます。よろしくお願い致します。 下記のスクリプトで、bt_sub1の部分（エレメント名）を、直接記述するのではなく、引数のiを使用して設定したいのですが、うまくいきません。 どのようにすれば良いでしょうか？ <SCRIPT language="JavaScript" > function func1(formp, i){ //OKです formp.bt_sub1.disabled = true; //エラーになりました var a = "bt_sub" + i; formp.a.disabled = true; } </SCRIPT> <HTML> <HEAD> <TITLE> テスト</TITLE> </HEAD> <BODY> <form> <input type="submit" value="送信" name="bt_sub1"> <input type="button" value="使用不可 "onclick="func1(this.form, 1);"> </form> </BODY> </HTML>
- ベストアンサー
- その他(ソフトウェア)
- JavaScriptで得た値を別ページに反映
JavaScriptで得た値を別ページに反映させたいと思っています。 同一ページでは上手くいきますが、別ページへの反映ができません。 教えてください、宜しくお願いします。 同一ページのサンプル <html> <head> <title>aa</title> <Script LANGUAGE='JavaScript'> <!-- function fncDisp() { label1.innerHTML = document.form1.txt.value; } --> </Script> </head> <body> <form name='form1' action=''> <div id='label1'>ここに表示</div> <input type='text' name='txt' value=''> <input type='button' name='btn' value='ボタン' onClick='fncDisp()'> </form> </body> </html>
- 締切済み
- JavaScript
- 画像からランダムリンク
Javascriptでランダムリンクをする場合、 <form> <input type=button onClick="jump()" value="ランダム"> </form> <script> url = new Array(); url[0] = "00.html"; url[1] = "01.html"; url[2] = "02.html"; function jump() { p = Math.round(Math.random() * (url.length - 1)); parent.top.document.location = url[p]; } </script> という記述を使うのは知っているんですが、 「ランダムリンク」というボタンではなく、 画像をクリックしてランダムリンクさせることは可能でしょうか？ Javascriptでは無理な場合、 画像からランダムリンクを張る方法はありますか？ CGI等でも構いませんので、お勧めがあれば教えてください。
- ベストアンサー
- JavaScript
お礼
おぉ！ これは使ってませんでした。 他のにも使えそうですし早速使ってみたいと思います。 親切な回答ありがとうございました。
補足
この数字を足していき、 １０を超えるというのはどういう風にしらべればいいのでしょうか。 ずうずうしいようですが教えてもらえるとありがたいです。