- ベストアンサー
promptで入力されたデータをテーブルに表示する方法。
Promptで入力した情報（生徒名とテストの点数）をテーブルに表示したいのですが、どうやるのかわかりません。 Promptはページを開いたときに自動的にでてきて、 空白入力があるまで何度でもポップアップするというふうになっています。 Ｓｔｙｌｅ Ｓｈｅｅｔを使ってやろうとしているのですが、今一やり方がわかりません。 ぜひぜひ、おしえてください！！！ <HTML> <head> <SCRIPT LANGUAGE=JavaScript> //Question 1 function oldDisplay() { var name = new Array(); var grade = new Array(); var entry = "new"; var Test = new Array(); var index = 0; var total = 0; while(true) { name[index]=prompt("Enter student name", ""); if (name[index]=="") {break} grade[index++] = parseInt(prompt("Enter grade for that student",0)); } document.write ("<PRE>"); for(index=0; index < name.length -1; index++) { document.write("Name: "+name[index]+ "\t\t\t Score: "+grade[index]+ "\n") } total = name.length - 1 document.write("This report lists "+ total + " records.") //Question 2 var ave = 0; for (index=0;index<grade.length;index++) { ave = ave+grade[index]; } ave=ave/(index); document.write("\n\n\nThe average score is "+ave); document.write ("</PRE>"); </SCRIPT> </head> <BODY onload="oldDisplay()"> <DIV ID="myDIV"> <P ID="myPARA"><H1>The results of the entry and computation are shown below.</H1></P> </DIV> </BODY> </HTML>
- RJ519
- お礼率81% (9/11)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (4)
- nuruhho44
- ベストアンサー率57% (38/66)
lead1976様、いつも私のへっぽこな回答をフォローして下さり、まことにありがとうございます。ちょうど、ＤＯＭでセルを追加する方法を研究中でして、参考にさせていただきます。 ところで、こんな風にしたら使い易いかなと思って、研究がてら以下のスクリプトを作ってみました。お試し下さい。 <HTML> <head> <SCRIPT LANGUAGE=JavaScript> <!-- var name = new Array(); var grade = new Array(); var index = 0; function oldDisplay() { name[index] = document.myForm.Name.value; txt = document.myForm.Score.value; data = txt.match(/[^0-9]/g); if (data || txt =="") { alert("数値を入力してください"); document.myForm.Score.value = ""; return; } grade[index] = eval(txt); SS = document.getElementById("TD1").innerHTML; SS = SS + ("Name: " + name[index] + " Score: " + grade[index] + "<BR>"); document.getElementById("TD1").innerHTML=SS; document.myForm.Name.value = ""; document.myForm.Score.value = ""; index++; document.getElementById("TD2").innerHTML="This report lists "+ index + " records."; ave = 0; for (i=0; i<index; i++) { ave += grade[i]; } ave = (Math.round(ave * 100 / index)) / 100; document.getElementById("TD3").innerHTML="The average score is "+ ave; } //--> </SCRIPT> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <STYLE type="text/css"> <!-- DIV{ font-size : 16px; font-family : "ＭＳ 明朝";} TD{ font-size : 16px; font-family : "ＭＳ 明朝";} --> </STYLE> </head> <BODY> <H1>The results of the entry and computation are shown below.</H1> <DIV> <FORM name="myForm"> Name:<INPUT type="text" size="20" name="Name"><BR> Score:<INPUT type="text" size="4" name="Score"><BR> <INPUT type="button" value=" OK " onClick="oldDisplay()"> <INPUT type="reset" value="reset"></FORM> </DIV> <TABLE border="1"> <TBODY> <TR> <TD id="TD1"></TD> </TR> <TR> <TD id="TD2">This report lists 0 records.</TD> </TR> <TR> <TD id="TD3">The average score is 0</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
お礼
へ～～！こんなふうにもできるんですね！ 一つ一つデータを入力するたびに表示されて とてもわかりやすいです。 知識があるといろいろ工夫できるものなんですね。 おかげさまですべての問題を解決することができました！ でも未だJavascriptは私にとっては謎だらけです。 またこれからも、この場に質問させてもらうと思いますが、よろしくおねがいします！ ありがとうございました！
- nuruhho44
- ベストアンサー率57% (38/66)
すみません。document.writeってどうも苦手で、なんで消えるのかわからないんです。ただ今調査しております。 とりあえず document.write ("<DIV ID='myDIV'>"); document.write ("<P ID='myPARA'>"); document.write ("<H1>The results of the entry and computation are shown below.</H1></P>"); document.write ("</DIV>") ; この文を結果表示の前に挿入するというのはいかがでしょうか？せこいアイデアですみません（汗*2）
お礼
アドバイスをありがとうございます！！ すばやいアドバイスをもらえて、本当に助かります。 おかげでJavascriptの勉強がだんだん楽しくなってきました。
- nuruhho44
- ベストアンサー率57% (38/66)
すみません！思いっきり外してました。ループはこのままで良かったんですね。またもう１つ勉強になりました。申し訳ございませんでした（汗） テーブルとして表示なさるのでしたら document.write ("<TABLE border='1'>"); for(index=0; index < name.length -1; index++) { document.write("<TR><TD>Name: "+name[index]+ "</TD><TD> Score: "+grade[index]+ "</TD></TR>") } total = name.length - 1 document.write("<TR><TD colspan='2'>This report lists "+ total + " records.</TD></TR>") //Question 2 var ave = 0; for (index=0;index<grade.length;index++) { ave = ave+grade[index]; } ave=ave/(index); document.write("<TR><TD colspan='2'>The average score is "+ave+ "</TD></TR>"); document.write ("</TABLE>"); } という風にテーブル関連のタグも一緒にdocument.write文に書くだけで良いかと思います。
お礼
ありがとうございます！！！ 今、教えていただいたとおりに書いてみたら ちゃんとテーブルに表示されました。 こうやってＴＡＢＬＥに表示するんですね。 私のほうこそ本当に勉強になりました。 しかし、なぜＢＯＤＹに書いたものがきえてしまうんでしょう？ 本当に不思議です。 でも難問が解決できてうれしいです。 ありがとうございます！！
- nuruhho44
- ベストアンサー率57% (38/66)
はじめまして。 入力部分のループを以下のようにすれば動作しました。 do { name[index]=prompt("Enter student name", ""); if (name[index]=="") break; grade[index++] = parseInt(prompt("Enter grade for that student",0)); } while (true) do～while（条件）にすれば最低１回はループを通過するとのことです。 私はループは何でもfor文でやってしまうので、とても勉強になりました。 あと、質問文をコピペしたのですが、 <BODY onload="oldDisplay()"> の部分で、BODYの後のスペースが全角であったためエラーが出ました。質問文を入力する際のミスであろうと思われますが、一応そちらの本文をご確認ください。
補足
ありがとうございます！！ コード自体は動くようなんですが、 このＨＴＭＬページを開いたときにはちゃんと 表示される ＜The results of the entry and computation are shouwn below> というものがprompts情報が表示されるときには 消えてしまいます。 ループのあとにdocument.writeをつかって できるのかと思ったのですができません。 どうすればいいんでしょう？
関連するQ&A
- JSでセレクトボックスの内容を切り替えたい
年末を向かえましたが、クリアできない問題を抱えて焦っています。 あるショッピングサイトを構築しておりますが、 商品詳細ページでカラーを選択するとそれに対応したサイズを 表示させたいと思っています。 カラー、サイズ共に異なるセレクトボックスを使用しております。 //サンプルデータ（2次元配列） var dataStock = new Array(new Array("ブラック", "S", 2), new Array("ブラック", "M", 3), new Array("ホワイト", "S", 1), new Array("ホワイト", "M", 2), new Array("ホワイト", "L", 1), new Array("レッド", "M", 3), new Array("レッド", "L", 2)); var dataSize = new Array(); //----------------- とりあえずデータ表示 ----------------- document.write("<table border='1'>"); for(i=0; i<data.length; i++) { document.write("<tr>"); for(n=0; n<data[i].length; n++) { document.write("<td>"+data[i][n]+"</td>"); } document.write("</tr>"); } document.write("</table><br /><br />"); //----------------- カラー表示 ----------------- document.write("<select name='color' onchange=getNo2(this.value);>"); for(i=0; i<data.length; i++) { document.write("<option value='"+data[i][0]+"'>"+data[i][0]+"</option>"); } document.write("</select><br /><br />"); //----------------- サイズ表示 ----------------- function getNo2(color) { document.write("<select name='size'>"); for(i=0; i<data.length; i++) { //↓2次元配列から選択したカラーの情報を取得 if(color == data[i][0]) { dataSize[i] = data[i][1]; document.write("<option value='"+dataSize[i]+"'>"+dataSize[i]+"</option>"); } } document.write("</select>"); } 上記処理だと、「対応したカラーのサイズを表示する」という 目的は達成できますが、カラーを選択すると ページ全部がサイズに上書きされ、サイズのセレクトボックスしか 表示されません。 当たり前ですが・・・ いろいろ試してみましたが、どれもうまく行きませんでした。 何か良いアドバイスがあればご教授下さい。 よろしくお願い致します。
- 締切済み
- JavaScript
- 配列を使って平均を求めるプログラムの異常 JavaScript
配列を使って平均を求めるプログラムをJavaScriptで書いているのですが、 実行して得られる平均の値が異常です。（*具体的には後述します） 正しい書き方を教えていただけたら幸いです。 仕様は ・実行と同時にポップアップウインドウで、「生徒1～3」の点数を記入させる ・記入が終わると、ページに生徒の点数と、3人の平均点が表示される というものです。以下がソースです。 var array = new Array(3); var i; array[0] = prompt("生徒1の点数を入力してください。", ""); array[1] = prompt("生徒2の点数をを入力してください。", ""); array[2] = prompt("生徒3の点数を入力してください。", ""); for(i = 0; i < 3; i++){ document.write("生徒 ", i + 1 ); document.write("：", array[i], "<br>"); } var sum = array[0]; for(i = 0; i < 3; i++){ sum += array[i]; var mean = sum/3; } document.write("<hr>"); document.write("平均点： ", mean, "点", "<br>"); ＊平均値が異常というのは、例えば生徒1に10,生徒2に20,生徒3に30を入力した時の平均点が 3367343.3333333335になってしまう、というようなものです。 原因がわからず困り果てております。 どなたかご親切な方、よろしくお願いします。
- ベストアンサー
- JavaScript
- プルダウンに追加項目を加える方法
過去記事にあった下記のプルダウンを使用させて頂いております。 選択できる項目を「くだもの→りんご→●●」ともうひとつ追加 するにはどうしたらよいのでしょうか？ どうぞよろしくお願いします。 <html> <head> <script> <!-- /* データ定義部(ここをDB検索結果から生成) */ var dataMain = new Array( new Array("1", "くだもの"), new Array("2", "やさい"), new Array("3", "さかな") ); var dataSub = new Array( new Array( new Array("1", "りんご"), new Array("2", "みかん"), new Array("3", "いちご") ), new Array( new Array("1", "にんじん"), new Array("2", "だいこん"), new Array("3", "きゅうり") ), new Array( new Array("1", "さば"), new Array("2", "いわし"), new Array("3", "さんま") ) ); // プルダウンを初期化 function initSel() { var selMain = document.forms[0].elements["selMain"]; // メインのプルダウンを初期化 setDataToSel(selMain, dataMain); // 先頭を選択 selMain.selectedIndex = 0; // 先頭を選択したのと同じ処理 changeSel(); } // プルダウンを選択したときの処理 function changeSel() { var selMain = document.forms[0].elements["selMain"]; var selSub = document.forms[0].elements["selSub"]; // メインのプルダウンの選択値によりサブの選択肢データを取得 var data = dataSub[selMain.selectedIndex]; // サブのプルダウンの選択肢を入れ換え setDataToSel(selSub, data); } // データを選択肢にセット function setDataToSel(sel, data) { // 選択肢をいったんクリア for(var i = 0 ; i < sel.options.length ; i++) { sel.options[i] = null; } // 新しい選択肢を作る for(var i = 0 ; i < data.length ; i++) { var dt = data[i]; sel.options[i] = new Option(dt[1], dt[0]); } } //--> </script> </head> <body onLoad="initSel()"> <form> <p> メイン： <select name="selMain" size="1" onChange="changeSel()"></select> </p> <p> サブ： <select name="selSub" size="1"></select> </p> </form> </body> </html>
- 締切済み
- JavaScript
- 連動するセレクトボックスの内容を増やしたい
お世話になります。 現在JavaScriptで以下のサンプルのような連動セレクトボックスを作っているのですが、親と子のセレクト項目を増やすやり方がわからず困っています。 http://enjoyjob.blog116.fc2.com/blog-entry-221.html サンプルでは親と子のセレクトボックスが３つなのですが、 ７つの親と子のセレクトボックスを作りたいと思っています。 JavaScriptのどの部分を変えればいいのかどうかご教授お願いいたします。 <script type="text/javascript"> var parentArray = new Array('東京都','神奈川県','静岡県'); ////親セレクトボックスを配列から書き出し function autoOptions(){ var parent=parentArray.length; var selectNumber = document.getElementsByTagName("select").length; for(var j=0;j<=selectNumber/2-1;j++){ idName='parent_'+j; document.getElementById(idName).length=parent+1; for(var i=0;i<parent;i++){ document.getElementById(idName).options[i+1].text= parentArray[i]; } } } ////連動セレクトボックス function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; if(document.getElementById(idParent).selectedIndex==0){ document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; } else { document.getElementById(idChild).selectedIndex=0; document.getElementById(idChild).length=1; var child = childArray[document.getElementById(idParent).selectedIndex-1]; document.getElementById(idChild).length=child.length+1; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i+1].text= child[i]; } } } ////子セレクトボックスの配列 var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); </script>
- ベストアンサー
- JavaScript
- javascript で undefinedと表示されます
全ての変数、配列に alert(typeof variable); を試しましたが undefinedが見つかりません。 function a{ var lastdayArray = new Array ('','31','28','31','30','31','30','31','31','30','31','30','31'); var weekArray = new Array ('日','月','火','水','木','金','土'); var a = new Date(); var b = new Date(); var mymonth = a.getMonth()+1; var nextmonth =mymonth +1 ; var myyear = a.getYear()+1; var today = a.getDate(); var maxbox = 36; var sday = a.setDate(1); var nday = b.setDate(1); var nmonth = b.setMonth(mymonth); var nwday = b.getDay(); var fwk = a.getDay(); var nfday = 6 - nwday; var fline = 6 - fwk; var nextlsday = lastdayArray[mymonth]; var lsbox = (fwk + lastdayArray[mymonth]) +1; var monthArray = new Array(mymonth,nextmonth); var monthflg = new Array(fwk,nfday); var nextflg = new Array(fline,nwday); var s_no0 = 1; var s_no1 = 1; //数値代入変数 var s_no2 = 1; var s_no3 = 0; var s_no4 = 0; var s_no5 = 0; var s_no6 = 0; var s_no7 = 0; var s_no8 = 0; var schedule_no = new Array(s_no0,s_no1,s_no2,s_no3,s_no4,s_no5,s_no6,s_no7,s_no8); var s_str0 = 'a'; var s_str1 = 'a'; //文字列代入変数 var s_str2 = 'a'; var s_str3 = 'a'; var s_str4 = 'a'; var s_str5 = 'aa'; var s_str6 = 'a'; var s_str7 = 'a'; var s_str8 = 'a'; var schedule_str = new Array(s_str0,s_str1,s_str2,s_str3,s_str4,s_str5,s_str6,s_str7,s_str8); for(var x = 0; x < 2; x++){ daycount = 0; document.write(monthArray[x] + '月の予定'); if(nmonth == 12){nmonth = 0;} document.write('<table width="73%" height="337" border="1" cellpadding="1" cellspacing="1">'); //曜日出力 document.write('<tr>'); for(var l = 0 ; l <= 6; l ++){ if(l == 0){ weekArray[l] = (weekArray[l].fontcolor('#ff1493').fontsize(4)); } else if(l == 6){ weekArray[l] = (weekArray[l].fontcolor('#87ceeb').fontsize(4)); } document.write('<td>' + weekArray[l] +'</td>');} document.write('</tr>'); //曜日を判定しテーブル出力 document.write('<tr>'); //空ボックス出力 if((monthflg[x]) != 6 ){ for(var k = 0; k < (monthflg[x]); k++){ document.write('<td>' + ' ' +'</td>'); } } if((monthflg[x]) == 0){ for(var y = 0; y < 6 ; y++){ document.write('<td>' + ' ' +'</td>'); } if((schedule_no[y]) === daycount){ daycount ++; document.write('<td>' + daycount + schedule_str[y] +'</td>'); } else { daycount ++; document.write('<td>' + daycount +'</td>'); } } else{ //空ボックスの数～土曜日まで出力 for(var m =0 ; m <= nextflg[x]; m++){ if((schedule_no[m]) === daycount){ daycount ++; document.write('<td>' + daycount + schedule_str[m] +'</td>'); } else { daycount ++; document.write('<td>' + daycount +'</td>'); } } } document.write('</tr>'); //行出力 for(var i =0 ; i < 4; i++){ document.write('<tr>'); //列出力 for(var j =0 ; j < 7; j++){ if(daycount < lastdayArray[monthArray[x]]){ daycount ++; document.write('<td>' + daycount +'</td>'); } else{ document.write('<td>' + ' ' +'</td>'); } } document.write('</tr>'); } //最終行出力 if(daycount < lastdayArray[monthArray[x]]){ document.write('<tr>'); for(var p =0 ; p < 7 ; p++){ if(daycount < lastdayArray[monthArray[x]]){ if((schedule_no[p]) === daycount){ daycount ++; document.write('<td>' + daycount + schedule_str[p] +'</td>'); } else { daycount ++; document.write('<td>' + daycount +'</td>'); } } else{ document.write('<td>' + ' ' +'</td>'); } } document.write('</tr>'); } document.write('</table>'); } }
- 締切済み
- その他（インターネット・Webサービス）
- コードを入力して、文字を表示させたい（javascript)
凄く悩んでいるのですが、良かったら教えてください。 入力フォームに コード 101 と入力したら、そのすぐ横に 配列から検索して、『オレンジ』と表示させたい のですが、どうもうまくいきません。 教えてください。 var koumoku = new Array('100','101','102'); var name = new Array('りんご','オレンジ','メロン'); 入力したものと、配列koumokuの中のコードと比べて 同じコードがあった場合、配列nameから「オレンジ」 を表示させたいのです。 for文等を使い、表示させたいです。 実は、かなりこの配列が長いので・・・ ご伝授お願いします。
- ベストアンサー
- JavaScript
- 複数枚画像を表示して一定時間で切り替える方法
画像を表示して一定時間で切り替える方法は別ページに記載されているものをみて出来たのですが、最初に複数枚表示してて、その画像を定時間で切り替えたいのですがご教授願います。 以下別質問で見つけたもの <!-- これを画像を張りたい位置に挿入。<body>～</body>内 --> <script type="text/javascript"> /* 設定部分 */ var interval = 3000; //切り替わる時間（1000=1秒） var imgs = new Array(); var hrefs = new Array(); imgs[0] = new Image(); imgs[0].src = "http://www.xxxxx.net/images/img-main/pake/013.jpg"; hrefs[0] = "http://www.xxxxx.net/moviepages/130923_707_01/index.html"; imgs[1] = new Image(); imgs[1].src = "http://www.xxxxx.net/images/img-main/pake/014.jpg"; hrefs[1] = "http://www.xxxxx.net/moviepages/130906_701_01/index.html"; imgs[2] = new Image(); imgs[2].src = "http://www.xxxxx.net/images/img-main/pake/015.jpg"; hrefs[2] = "http://www.xxxxx.net/moviepages/130830_698_01/index.html"; /* プログラム部分 */ var num = Math.floor(Math.random()*imgs.length); document.write('<a href="'+hrefs[num]+'" id="cth"><img src="'+imgs[num].src+'" id="cti" style="border:0" /></a>'); var cti = document.getElementById("cti"); var cth = document.getElementById("cth"); setInterval(function(){ num += Math.floor(Math.random()*(imgs.length-1))+1; if(num>=imgs.length) num -= imgs.length; cti.src = imgs[num].src; cth.href = hrefs[num]; },interval); </script> <!-- ここまで --> script初心者でよくわかりません＞＜
- 締切済み
- JavaScript
- 多次元配列がさっぱりです。
var img = ["test01.jpg", "test02.jpg", "test03.jpg", "test04.jpg"]; var name = ["テスト1", "テスト2", "テスト3", "テスト4"]; for (var i = 0; i < img.length; i ++) { document.write('<img src="../img/' + (img[i]) + '" width="132" height="160" border="0" />' + '<br />'); for (var j = 0; j < name.length; j ++){ document.write((name[j])); } } 全然駄目です・・・ 画像があって、画像の下に var name を表示したいんですが、分かりませんでした。分かるかた、教えてください！
- ベストアンサー
- JavaScript
- 特定の時間に複数のメッセージからアットランダムに表示する
１ 特定の時間（たとえば、朝の７時から８時まで）に２ 複数のメッセージ（たとえば、どこかのページへのリンク）の中からランダムに表示するジャバスクリプトを作りたいと思っています。 １と２は別個のスクリプトがあるのですが、これを統合すればいいのでは、と思ってやっているのですが、わかりません。なにとぞ宜しくお願いいたします。 ================= １ mes=new Array(24); mes[0]=""; mes[1]=""; //略 mes[23]=""; function timer(){ myDate=new Date(); myTime=myDate.getHours(); document.write(mes[myTime]); } timer(); //--> ２ var quotes=new Array() quotes[0]='メッセージかリンク' var whichquote=Math.floor(Math.random()*(quotes.length)) document.write(quotes[whichquote])
- ベストアンサー
- JavaScript
- document.write以外の方法での記述法
javascript無知識なのですが 諸事情により下記のjsをdocument.write以外の方法で記述しなければならないのですが document.write以外の記述で同じ効果が得られる記述法ってないのですか？ あればご教示よろしくお願いします。 <script language="javascript"> <!-- function rotationAdv() { m = 0, x = 0, y = 0; ad = new Array(); adv = new Array(); hit = new Array(); hit[0] = 1; adv[0] = 'A'; hit[1] = 1; adv[1] = 'B'; hit[2] = 1; adv[2] = 'C'; for(i=0; i<=hit.length - 1; i++) { m += hit[i]; } n = Math.floor(Math.random() * m); n++; for(i=0; i<=hit.length - 1; i++) { x = y; y += hit[i]; if(x<n && n<=y) ad = adv[i]; } document.write(ad); } rotationAdv(); //--> </script>
- 締切済み
- JavaScript
お礼
すごい！！！ ちゃんと思い通りにできてる！ おどろきました。 そうか、だから文字がきえてしまっていたんですね。 とてもわかりやすい説明ありがとうございます。 ほんと、うれしいです。 ありがとうございました！ またおねがいします！