• ベストアンサー

function処理後、IE以外初期化されてしまいます

以下のスクリプトでドロップダウンから「フランス」を選ぶと正解と表示され、alertも出ます。 その後、IEでは表示された内容で、ドロップダウンの選択された状態が残るのですが、firefox,opera,safariともreloadされたように初期化されてしまいます。 どうしたら初期化されないように出来るでしょうか。 <html> <head> <script type="text/javascript"> <!-- var seikai = new Array(0,10,2,7,12,14,6,16,15,3,9,11,4,5,13,8,1); var msg_text = ""; var kotae = new Array(); function check1(){ seikai_count = 0; kotae=""; for(i=1;i<2;i++){ if(seikai[i]==document.getElementById("q"+i).value) seikai_count++; } msg_text = seikai_count + " 問正解です"; document.getElementById("msg").innerHTML = msg_text; alert(msg_text); return; } // --> </script> </head> <body> <form name="quiz"> <select id="q1"> <option value="0">---- <option value="1">アラビア <option value="2">スウェ-デン <option value="3">スペイン <option value="4">タイ <option value="5">ドイツ <option value="6">トルコ <option value="7">ビルマ <option value="8">ヒンディー <option value="9">フィリピン <option value="10">フランス <option value="11">ベトナム <option value="12">ペルシャ <option value="13">ポルトガル <option value="14">モンゴル <option value="15">ルーマニア <option value="16">ロシア </select> <div id="msg"></div> <button onclick="javascript:check1();">正解数をみる</button> </form> </body> </html>

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

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

ブラウザによってはbuttonはsubmitを兼ねますので・・・ やり方は2つ (1)return falseとする。 <button onclick="javascript:check1();return false;">正解数をみる</button></form> (2)inputをつかう <input type="button" onclick="javascript:check1();" value="正解数をみる">

fire--
質問者

お礼

return false;にするという説明文は見つけていたのですが、functionの中のreturnに指定していました。onclickの中につけるとは思いませんでした。 どうも、ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • venzou
  • ベストアンサー率71% (311/435)
回答No.2

下記の様に、type属性を指定して下さい。 <button type="button" onclick="javascript:check1();">正解数をみる</button> <button>で type 属性を省略した場合、規定値が使われますが、 その規定値がブラウザによって異なるようです。 IEは button が規定値のようですが、 HTMLの規格上は submit が規定値のはずです。

fire--
質問者

お礼

なるほど、typeの明示指定で変わるとは気づきませんでした。 IEだけ違うのは規格の問題というのは良くある話ですね。 どうも、ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 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の動作で困ってます。

    動作不良が三箇所あります。 プログラムに詳しい方がいらっしゃいましたら原因を教えて下さい。 ・未入力の質問をアラートで一括表示させたいのですが、 (3)のテキストエリアの箇所が未入力なのにアラートに表示できません。 判定のtrueとfalseを逆にして試すと、(3)のアラートは表示されるものの、記入しても アラートが出続けます。 ・1度しか指定していないにも関わらず同じ内容の警告アラートが2回出てしまう原因が分かりません。 ・入力した項目や選択した項目に関しては未入力項目のアラートとは別のアラートを用意してvalueの値をアラートで一括表示させたいのですが、関数を定義しているにも関わらず、関数が定義されていないとエラーメッセージが帰ってきて、表示されません。 ソースコードは以下になります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function check(){ var msg = ""; var msg2 = ""; var str = document.form.id.value; var str2 = document.form.pass.value; if (str.match(/[^0-9]+/)) { alert("客番号は数字のみ"); } if (str.length>5) { alert("客番号は4~5桁"); } if(str.length<4){ alert("客番号は4~5桁"); } if(str==""){ msg += "客番号が未入力です。\n"; }else{ msg2 += document.form.id.value; } if(str2==""){ msg += "パスワードが未入力です。\n"; }else{ msg2 += document.form.pass.value; } if(radioCheck()==false){ msg += "(1)が未入力です。\n"; } if(checkboxCheck()==false){ msg += "(2)が未入力です。\n"; } if(textareaCheck()==false){ msg += "(3)が未入力です。\n"; } if(selectCheck()==false){ msg += "(4)が未入力です。\n"; } if(msg != ""){ //メッセージを出力 alert(msg); } if(radioCheck()==true){ msg2 += document.form.eng.value ; } if(checkboxCheck()==true){ msg2 += document.form.lang.value ; } if(txtareaCheck()==true){ msg2 += document.form.opinion.value ; } if(selectCheck()==true){ msg2 += document.form.age.value ; } if(msg2 != ""){ //メッセージを出力 alert(msg2); } } function radioCheck(){ var count = 0; var eng=document.getElementsByName("eng"); for(var i=0;i<eng.length;i++){ if(eng[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function checkboxCheck(){ var count = 0; var checklist=document.getElementsByName("lang[]"); for(var i= 0;i<checklist.length;i++){ if(checklist[i].checked){ count++; } } if(count != 0){ return true; } else{ return false; } } function textareaCheck(){ var textarea=document.getElementById("demand").value; if(textarea!=""){ return true; } else{ return false; } } function selectCheck(){ var selectValue=document.getElementById("age").value; if(selectValue!="選択されていません"){ return true; } else{ return false; } } </script> </head> <body> <form action="http://www" method="post" name="form"onSubmit="return check()"> <h1>アンケート</h1> <p><label>客番号:<input type="text" name="id"></label></p> <p><label>パスワード:<input type="password" name="pass"></label></p> <h2>(1)</h2> <p>食べたいですか?<br> <br> <input type="radio" name="eng" value="yes"> はい <input type="radio" name="eng" value="neither"> どちらでもない <input type="radio" name="eng" value="no"> いいえ </p> <h2>(2)</h2> <p>食べたい物<br> <br> <input type="checkbox" name="lang[]" value="apple"> りんご <input type="checkbox" name="lang[]" value="banana"> バナナ <input type="checkbox" name="lang[]" value="pasta"> パスタ <input type="checkbox" name="lang[]" value="pizza"> ピザ <input type="checkbox" name="lang[]" value="supu"> スープ </p> <h2>(3)</h2> <p>意見(自由記述)<br> <textarea id="demand" name="opinion" cols="40" rows="4" maxlength="20"> </textarea> </p> <h2>(4)</h2> <p> 年齢を選択 <select id="age" name="age"> <option selected value="選択されていません">以下から選択</option> <option value="10~19才">10~19才</option> <option value="20~29才">20~29才</option> <option value="30~39才">30~39才</option> <option value="40~49才">40~49才</option> <option value="50~59才">50~59才</option> <option value="60~69才">60~69才</option> <option value="70才~">70才~</option> </select> </p> <p> <input type="submit" name="button" value="送信" onclick="check();"> <input type="reset" value="クリア"> </p> </body> </form> </html>

  • JQueryでfunctionに引数としてIDを渡して処理する方法

    HTMLの制御にjQueryを使用しています。 functionに引数としてIDを渡して処理をしたいのですが、やりかたが分かりません。 テスト的にtest1Script、test2Scriptを作成しました。 test1と同様の結果を、引数にIDを渡すtest2Scriptでも得たいのですが、 失敗(1)や失敗(2)のように書いた場合、うまくいきません。何か良い方法はないでしょうか。ご教授下さい。 <script type="text/javascript"> function test1Script(){ alert($("#textfield1").val()); } function test2Script(objId){ //alert($("#objId").val()); 失敗(1) //alert($(#objId).val()); 失敗(2) } </script> </head> <body> <input type="text" id="textfield1" value="test1" /> <input type="button" id="button1" value="テスト1" onclick="test1Script();" /> <input type="button" id="button2" value="テスト2" onclick="test2Script('textfield1');" /> </body> </html>

  • 文字列でなくて数値として処理をしたい。

    年度があって、2008 ボタンをクリックすると1を足して2009としたいのですが、文字列として扱われ20081となってしまいます。 数値として処理するにはどのように修正したらいいのでしょうか? ご存知の方教えてください。 <script type="text/javascript"> function test(parts){ var result = document.getElementById('result'); nendo = document.tForm.y.value; if(nendo == ""){ document.tForm.msg.value = "2008"; } else {document.tForm.msg.value = nendo + 1; } } </script> </HEAD> <BODY> </p> <form name="tForm"> <p> <INPUT TYPE="text" NAME="msg" SIZE=20 id="y"> <br> <input type="button" name="" value="足し算" onClick="test(this)">

  • IDの取得、繰り返しに問題があるようなんですが・・・

    複数のセレクトの中から選んだ内容をコピーするスクリプトなんですが、 function answerPut(){ var answer = document.getElementById("s1"); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } ▲このように単独で1つのフォームからならコピーできたのですが これを複数のフォームに対応させるためにforを使ってみたのですが どうにもうまくいきません。お知恵を拝借いただければ幸いです。 ▼うまくいかないスクリプト <html> <body> <script type="text/javascript"> function answerPut(){ for(var i=1; i<=3; i++){ var answer = document.getElementById(id+i); var answerCopy = document.getElementById("answer"); answerCopy.value=answer.value } } </script> (1)<select name="" id="s1" onChange="answerPut();"> <option value="あ1">あ1</option> <option value="い1">い1</option> <option value="う1">う1</option> </select> (2)<select name="" id="s2" onChange="answerPut();"> <option value="あ2">あ2</option> <option value="い2">い2</option> <option value="う3">う2</option> </select> (3)<select name="" id="s2" onChange="answerPut();"> <option value="あ1">あ3</option> <option value="い2">い3</option> <option value="う3">う3</option> </select> <br> <br> ▼選んだ回答内容が入る<br> <input type="text" name="9" value="" size="40" id="answer"> </body> </html>

  • 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の入れ子

    久しぶりの、教えて gooです。 宜しくお願いします。 HTMLとJavascriptで動くホームページを、メモ帳で記述しています。 構造は、 1)HTML、BODY、FORM内のselectで、条件1と条件2を取得  Javascriptで、入力チェックすると同時に、  読み込むデータベース jsファイルです を動的に決めて、変数aに格納します。  また、条件3を、変数bに格納します。 2)次に、外部に置いているjsファイルを、Javascriptで読み込みます。 3)そして、Javascriptで、条件3に一致するレコードでテーブルを生成して  innerhtmlで書き出します。 部品1)単体、部品3)単体は、動作チェックが済んでいます。 ですが、部品1)から、部品3)に、変数a、bを引き渡せていないようで 検索条件は指定出来るのに、読み込み、書き出しが実行できません。 どのように、記述を改めれば動作するのか、教えて下さい。 宜しくお願いします。 以下、ソースを抜粋します。 001 <HTML> 002 <HEAD> 003 <SCRIPT type="text/javascript"> 004 function Select(){ 005 var frm = document.forms["frm1"]; 006 007 var idx = frm.elements["select1"].selectedIndex; 008 var idy = frm.elements["select2"].selectedIndex; 009 var idz = frm.elements["select3"].selectedIndex; 010 011   if(idx!="" && idy!="" && idz!="") { 012 /* 読み込みDB */ 012 dbname1 = frm.elements["select1"].options[idx].value; 013 dbname2 = frm.elements["select2"].options[idy].value; 014 /* DB抽出条件 */ 015  jouken1 = frm.elements["select3"].options[idz].value; 016 017 /* DB名称生成 */ 018 DBname = "./DB_" 019 DBname += dbname1 020 DBname += "_" 021 DBname += dbname2 022 DBname += ".js" 023 } 024 else{ 025 alert("未入力項目があります"); 026 } 027 } 028 </script> 029 030 031 <script type="text/javascript" src="DBname"></script> 032 033 034 <script type="text/javascript"> 035 var i; 036 var r; 037 var arrayLength=exDB.length; 038 039 function dataSearch(jouken1) { 040 var flag=false; 041 var msg; 042 var data=new Array(); 043 044   msg = "<TABLE BORDER='0'>"; 045 msg = msg+"<TR>" 046 msg = msg+"<TH width='60'>名前</TH> 047 msg = msg+"<TH width='120'>都道府県</TH> 048 msg = msg+"<TH width='120'>電話番号</TH>"; 049 msg = msg+"</TR>"; 050 051 for(i=0; i<arrayLength; i++) { 052 data=funeDB[i].split(" "); 053 if(data[0]==jouken1) { 054 flag = true; 055 msg = msg+"<TR>"; 056 msg = msg+"<TD class='light-right' width='60' >"+data[0]+"</TD>"; 057 msg = msg+"<TD class='light-right' width='120'>"+data[1]+"</TD>"; 058 msg = msg+"<TD class='light-center' width='120'>"+data[2]+"</TD>"; 059 msg = msg+"</TR>"; 060 } 061 if(flag==false) { 062 msg = msg+"<tr><td>該当する文字列はありません</td></tr>"; 063 } 064 msg = msg+"</TABLE>"; 065 document.getElementById("displayPane").innerHTML=msg; 066 } 067 </SCRIPT> 068 069 070 </HEAD> 071 072 <BODY> 073 074 <FORM name="form" action="#"> 075 <SELECT name="select1"> 076 <option value="">▼選択してください</option> 077     中略 078 </SELECT> 079 080 <SELECT name="select2"> 081 <option value="">▼選択してください</option> 082     中略 083 </SELECT> 084 085 <SELECT name="jouken1"> 086 <option value="">▼選択してください</option> 087     中略 088 </SELECT> 089 090 <INPUT type="button" value="検索する" onclick="Select()" /> 091 092 </FORM> 093 094 <DIV id="displayPane"></DIV> 095 096 </BODY> 097 098 </HTML>

  • 同じようなのばかりだ申し訳ないのですが…javaに関してです。

    以下のようなプログラムを作成しました。3つのスクリプトを動作させたいのですがどうすればよいですか?また,画像のように(1)~(3)の和を算出するにはどうすればいいですか?助けて下さい。お願いします。 <html> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v2=document.getElementById('s2').value; var rslt; if (v1==1 && v2==1){ rslt=50; } else { if (v1==1 && v2==2) { rslt=47; } else { if (v1==2 && v2==1) { rslt=30; } else { rslt=20; }}} document.getElementById('txt1').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v3=document.getElementById('s3').value; var rslt; if (v1==1 && v3==1){ rslt=40; } else { if (v1==1 && v3==2) { rslt=80; } else { if (v1==2 && v3==1) { rslt=70; } else { rslt=10; }}} document.getElementById('txt2').value=rslt; } </script> <script type="text/javascript"> function hoge(){ var v1=document.getElementById('s1').value; var v4=document.getElementById('s4').value; var rslt; if (v1==1 && v4==1){ rslt=83; } else { if (v1==1 && v4==2) { rslt=53; } else { if (v1==2 && v4==1) { rslt=33; } else { rslt=13; }}} document.getElementById('txt3').value=rslt; } </script> <body> <select id="s1" onChange="hoge()"> <option value="1">1<option value="2">2 </select>   <select id="s2" onChange="hoge()"> <option value="1">1<option value="2">2 </select>   <select id="s3" onChange="hoge()"> <option value="1">1<option value="2">2 </select> <select id="s4" onChange="hoge()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""> </body> </html>

    • ベストアンサー
    • Java
  • ボタンに書かれている文字の入れ替え

    2つのボタンのどちらを押しても、ボタンに書かれているアルファベットが入れ替わるようにしたいのですが、うまくいきません。 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>

  • PHPのシンプルな構文(初心者)

    ランダムに出る掛け算の答えを入力して 別ファイルで正解か不正解という表示をする構文なのですが 「input type="hidden"」部分の値の出力・受取りができず 正しく実行がされません。 どこが間違っているのでしょうか? よろしくお願いいたします。 in.php -------------------------------------- <?php $saki = rand(1,9); $ato = rand(1,9); echo "$saki X $ato"; $seikai = $saki*$ato; ?> <html> <body> <form method="post" action="out.php"> <input type="text" name="kotae"> <input type="hidden" name="hid" value="<?php $seikai ?>"> ←※ <input type="submit" value="回答"> </form> </body> </html> -------------------------------------- out.php -------------------------------------- <?php $kotae = $_POST["kotae"]; $seikai = $_POST["hid"];     ←※ if($kotae == $seikai){ echo "正解です"; }else{ echo "間違っています。"; } echo "<hr>正解は{$seikai}です。"; ?> --------------------------------------

    • ベストアンサー
    • PHP