• 締切済み

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> どなたかアドバイスをいただけないでしょうか? よろしくお願いします。

みんなの回答

回答No.3

回答は既に頂いているので端折ります。 ChromeかFireFoxで「Ctrl + Shift + J」でコンソールが開きます。 エラーなら行数まで教えてくれるのでデバッグをしましょう。 IEは「Developer Tools」を使用する上に重いのでオススメ出来ません。 (IEはバグもあるので稀にJavaScriptが正常に動作しない場合もある) 何を間違えたのか?を究明するのもプログラミングの一つになります。

  • notnot
  • ベストアンサー率47% (4846/10257)
回答No.2

誤: document.quiz.element[0].value=col[Rnd]; 正: document.quiz.elements[0].value=col[Rnd]; 経験上、初心者の「うまくいかない」の9割はタイプミスです。 「絶対にどこかにタイプミスがある」と疑ってかかるのがいいと思います。

  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.1

> document.quiz.element[0].value=col[Rnd]; elementじゃなくてelements。凡ミスですね。 ちゃんとエラーコンソールでエラーメッセージは確認していますか? どの辺が間違っているのかは大体それでわかりますよ。

関連するQ&A

  • 電卓の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; } 同様に2~9 </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で配列の重複判定の方法について

    似たような質問はありましたが、明確な答えが定まらないため質問させていただきます。 何卒、ご教授宜しくお願いします。 ■やりたいこと questions配列から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を短くしたい

    初歩的なことですみません。 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>

  • 乱数の生成について

    下記のスクリプトではボタンをクリックして乱数を生成しています。 ボタンをクリックする事無く、windowが開くと同時に乱数を生成するにはどのようにすれば良いでしょうか? <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function gen_random(num1, num2) { retval=Math.random(); document.myform.ans.value = (Math.floor(retval * (num2 - num1)) + eval(num1)); } //--> </SCRIPT> </HEAD> <BODY> <center> <form name=myform> 乱数の範囲 <input type=hidden name=d1 value=1000> <input type=hidden name=d2 value=9999> <input type=button name=btn1 value=乱数発生 onClick=gen_random(myform.d1.value,myform.d2.value)><br> 乱 数:<input type=text name=ans size=4> </form> </center> </BODY> </HTML>

  • <input type="file"/>

    に文字列をセットするために <form> <input type="file" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> としてもセットできません <form> <input type="text" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> であればセットできるのです どうしたらセットできるでしょうか?

  • 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とhtmlでわからないとこが・・

    ボタンを押すと1~9までの数字が出てくるってので 繰り返し押せるようにしたいのですが、 ボタンを押すと文字だけになり再度ボタンを押すにはブラウザの戻るを 押すことになってしまうんですけどどうしたらいいでしょうか? <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> 出来れば、 出てきた数値が10を超えると画像を切り替える方法も教えてもらえるとありがたいです。 よろしくお願いします。

  • javascriptのtextbox

    こんばんは。 <html> <body> <center> <br><br> <form name="fuji"> TEXT BOX<br> <input type="text" name="tex"> </form> <SCRIPT type="text/javascript"> var i; i="ABC" document.write("<input type='button' value='↑を変数iに代入' onClick='i=(document.fuji.tex);'>"); document.write("<br><input type='button' value='表示' onClick='document.write(i);'>"); </SCRIPT> </center> </body> </html> でテキストボックスの中身を表示させたいのですが、 上手くいきません。どうすればいいのでしょうか。 また、変数を使わずに直接テキストボックスの中身を 表示させる事はできるのでしょうか。 教えてください。

  • 親フレームの変数にアクセス(JavaScript)

    [index.html] <script src="script.js"></script> <frameset rows="50%,*" frameborder="1"> <frame src="content1.html"name="cont1"> <frame src="content2.html" name="cont2"> </frameset> [script.js] var test_text="てすと"; [content1.html] <form> <input type="text" name="in"> <input type="button" onClick="window.parent.test_text = document.forms[0].in.value;" value="IN"> </form> [content2.html] <form> <input type="text" name="out"> <input type="button" onClick="document.forms[0].out.value = window.parent.test_text;" value="OUT"> </form> のようになっています。 「index.html」の「script.js」の変数に、「content.1html」と「content2.html」からアクセスしたいです。 ですが、フレームになっているため、思うような動作をしてくれません。 よろしくお願いします。

  • JavaScriptで電卓を作って一応完成はした

    のですが、分からないコードがあります。以下のコードです。 ~HTML~ <form name="dentaku"> <input type="text" name="line" value="0"> <input type="button" value="C" onclick="cl()"> <input type="button" value=" 7 " onclick="val(7)"> <input type="button" value=" 8 " onclick="val(8)"> <input type="button" value=" 9 " onclick="val(9)"> <input type="button" value="÷" onclick="keisan('/')"> <input type="button" value=" 4 " onclick="val(4)"> <input type="button" value=" 5 " onclick="val(5)"> <input type="button" value=" 6 " onclick="val(6)"> <input type="button" value="×" onclick="keisan('*')"> <input type="button" value=" 1 " onclick="val(1)"> <input type="button" value=" 2 " onclick="val(2)"> <input type="button" value=" 3 " onclick="val(3)"> <input type="button" value="-" onclick="keisan('-')"> <input type="button" value=" 0 " onclick="val(0)"> <input type="button" value=" ・ " onclick="val('.')"> <input type="button" value=" + " onclick="keisan('+')"> <input type="button" value="=" onclick="keisan('=')"> </form> ~JavaScript~ total = 0; input = ""; ope = "+"; flg = 1; function val(data) { flg = 0; input += data; document.dentaku.line.value = input; } function keisan(data) { if (flg == 0) { flg = 1; cf = total + ope + input; total = eval(cf); input = ""; document.dentaku.line.value = total; } if (data == "=") { total = 0; ope = "+"; } else { ope = data; } } function cl() { total = 0; ope = "+"; input = ""; document.dentaku.line.value = total; } 関係のないコードは省略してあります。また、CSSも省略しますが、テーブル要素を使わず以下の画像のようにインライン要素(input要素)の性質を利用して回り込みをさせています。 長くなりましたが、そこで質問なのですが、 (1)変数ope(operandの略)なのですが、初期値は+なのに演算子ボタン(上記のHTMLコード)をクリックすると、なぜ値がその演算子に変わるのか理由を教えて下さい。 何となく理由は分かりますが、はっきりと理解したいです。 (2)上記のHTMLコードをもっと簡単に書けませんか? 特にonclickをボタンの数だけ書くのは手間です。

専門家に質問してみよう