![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
前回質問をしたものです。前回はお世話になりました。
下記のhtmlでは、1回のゲームで終わりとなります。これをファイルか
ら読んでファイルが尽きた所で終了にしたいのですが。現在は下記の
htmlです。
<HTML>
<HEAD>
<TITLE>Typing Game</TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12 …
<script>
$(function(){
var q="あいうえお";
$('#q').html(q);
$('input[type=text][name=a]').on('keyup',function(){
var v=$(this).val()
var reg=new RegExp('^'+v);
$('#q').html(q);
if(v==""){
$('#res').html('');
}else if(q==v){
$(this).data('pre',v);
$('#res').html('complete');
}else if(q.match(reg)){
$(this).data('pre',v);
$('#res').html('ok');
}else{
if(q.length>=v.length) $('#q').html(q.substr(0,v.length-1)+"<span style='color:red;font-weight:bold'>"+q.substr(v.length-1,1)+"</span>"+q.substr(v.length));
$(this).val($(this).data('pre'));
$('#res').html('ng');
}
});
});
</script>
</HEAD>
<BODY>
<div id="q"></div>
<input type="text" name="a" style="width:20em;">
<div id="res"></div>
</BODY>
</HTML>
javascriptのタイピングゲームでクリアした後の次の出題の処理が分か
らない。
今のは出題を変数に固定をしているが。これをファイルから出題をする
所の処理が分からない。
completeを表示した後の処理をどの様にしたら新たなゲームの開始とな
るのかその時のコードを回答願います。
宜しくお願いします。
No.2ベストアンサー
- 回答日時:
一点確認
ttpのところhttpになおしても同じでしょうか?
(へんなリンクになるので書き換えちゃったんですけど)
有難う御座います。ttpをhttpに直してみましたが同じでした。
実行すると、質問と回答とレスポンスの所が表示されます。
然し、最初の一行の「あいうえお」は正常に動いていますが。然し、以
前に入力した「あいうえお」は残っています。この時に"complete"と表
示しています。
それで、edit boxの内容を消してから「次へ」のボタンをクリックして
「かきくけこ」を表示させてからedit boxに最初の「か」を入力したら
直に質問が「あいうえお」に変更になります。
多分に私のソースに問題が有ると思うのですが。混ぜた時におかしく
なっていると思いますが。おかしい所が分かりません。よろしくお願い
します。
No.1
- 回答日時:
前回ajaxでとお伝えしましたが。
最初から問題文をたくさん用意しておけばajaxで取りに行く必要はなかったですね
かりにcompleteの際に「次へ」ボタンで誘導として、こんな感じ
前回書いたものと合体は一度ご自身で試してみてください
<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var questions=[
"あいうえお",
"かきくけこ",
"さしすせそ",
"たちつてと",
];
$(function(){
var q_count=0;
$('input[type=button][value="次へ"]').on('click',function(){
if(questions.length>q_count){
var q=questions[q_count];
$('#q').html(q);
q_count++;
}else{
$('#q').html('**終了しました**');
$(this).prop('disabled',true);
}
}).click();
});
</script>
<div id="q"></div>
<input type="text" name="a" style="width:20em;">
<div id="res"></div>
<input type="button" value="次へ">
有難う御座います。
下記のhtmlで上手く動きません。
htmlの全文は容量制限の為に少出しに出します。
以下、何回に分けて出します。
<HTML>
<HEAD>
<TITLE>Typing Game</TITLE>
<script src="ttp://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var questions=[
"あいうえお",
"かきくけこ",
"さしすせそ",
"たちつてと",
];
$(function(){
var q_count=0;
var q="あいうえお";
$('#q').html(q);
$('input[type=text][name=a]').on('keyup',function(){
var v=$(this).val()
var reg=new RegExp('^'+v);
$('#q').html(q);
if(v==""){
$('#res').html('');
}else if(q==v){
$(this).data('pre',v);
$('#res').html('complete');
}else if(q.match(reg)){
$(this).data('pre',v);
$('#res').html('ok');
}else{
if(q.length>=v.length) $('#q').html(q.substr(0,v.length-1)+"<span style='color:red;font-weight:bold'>"+q.substr(v.length-1,1)+"</span>"+q.substr(v.length));
$(this).val($(this).data('pre'));
$('#res').html('ng');
}
});
残りの部分は、次回に送ります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JQueryで動的生成のスライダが...
-
親フレームの存在確認
-
<SCRIPT src="css.js">の記述位置
-
Javascriptの勉強初めました!
-
クリックテキストを次ページに表示
-
Javascriptを使ってQRコード読...
-
同一ページ移動時ハンバーガー...
-
要素内を常に一番下を表示させたい
-
readyStateが4にならない原因
-
Doctrineのjoinについて
-
階層別の組織図の自動作成について
-
Selenium4でボタンをクリックで...
-
[jQuery UI] sortableを使いaja...
-
SQLのmaxで求めた値を変数に代...
-
VBAでIEのHTMLタグの要素を操作...
-
Selenium Basicの件
-
たくさんの経由地がある巡回ル...
-
スライドを最後の画像で止めたい
-
プルダウン内容に応じてラジオ...
-
【JQuery】iframeのリンク先変...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
インラインフレームを自動更新...
-
フレーム内の要素へのXPATHはど...
-
jQueryでloadした部分に.jsが効...
-
Folder.selectDialog()について
-
日付が変わると自動更新
-
jQueryで追加した要素がマウス...
-
Javascriptの勉強初めました!
-
jQuery toggle() 戻るで開いた...
-
AjaxでSJISファイル読み込みす...
-
一定時間ごとに表示内容を切り...
-
div要素の入れ替え。半透明イメ...
-
backbone.js テンプレートの表...
-
JQUERY のEmpty()処理について
-
ホームページのジャンプ先を制...
-
XHTMLで外部JSファイルを読み込...
-
連番タイトル名を基準にリンク...
-
javascriptからのphpクラス...
-
META http-equiv content のあ...
-
<SCRIPT src="css.js">の記述位置
-
IEとIE以外のブラウザで表...
おすすめ情報
続きを送ります。
$('input[type=button][value="次へ"]').on('click',function(){
if(questions.length>q_count){
var q=questions[q_count];
$('#q').html(q);
q_count++;
}else{
$('#q').html('**終了しました**');
$(this).prop('disabled',true);
}
}).click();
});
</script></HEAD>
もう1回送ります。
続きです。これで終わりです。
<BODY>
<div id="q"></div>
<input type="text" name="a" style="width:20em;">
<div id="res"></div>
<input type="button" value="次へ"></BODY>
</HTML>
htmlの文が長くなったので<script src="01.js"></script>
01.jsは下記。
var questions=[
"あいうえお",
"かきくけこ",
"さしすせそ",
"たちつてと",
];
$(function(){
var q_count=0;
$('input[type=button][value="次へ"]').on('click',function(){
if(questions.length>q_count){
var q=questions[q_count];
$('#q').html(q);
q_count++;
}else{
$('#q').html('**終了しました**');
$(this).prop('disabled',true);
}
}).click();
});
01.jsの$('input[type=button][value="次へ"]').on('click',function(){
は次へのボタンをクリックした時の動作を定義している。だから、この
01.jsではボタンをクリックしていなければ質問の領域には何も表示は
出ない筈ですが。
実際は、あいうえおと表示をしています。これは、何故でしょうか。私
は、一切の質問の領域には表示されないと思ったのですが。
済みません。教えて下さい。
01.jsを下記の様に変更したら一部不具合は有りますが動くのは動きます。
var questions=[
"あいうえお",
"かきくけこ",
"さしすせそ",
"たちつてと",
];
再度送ります。
$(function(){
var q_count=0;
q=questions[q_count];
$('input[type=text][name=a]').on('keyup',function(){
var v=$(this).val()
var reg=new RegExp('^'+v);
$('#q').html(q);
if(v==""){
$('#res').html('');
}else if(q==v){
$(this).data('pre',v);
$('#res').html('complete');
$('input[type=text][name=a]').val('');
++q_count;
if(q_count>3){
alert("end job");
}
q=questions[q_count];
$('#q').html(q);
}else if(q.match(reg)){
$(this).data('pre',v);
$('#res').html('ok');
}else{
if(q.length>=v.length) $('#q').html(q.substr(0,v.length-1)+"<span style='color:red;font-weight:bold'>"+q.substr(v.length-1,1)+"</span>"+q.substr(v.length));
$(this).val($(this).data('pre'));
$('#res').html('ng');
}
});
$('input[type=button][value="次へ"]').on('click',function(){
if(questions.length>q_count){
var q=questions[q_count];
$('#q').html(q);
q_count++;
}else{
$('#q').html('**終了しました**');
$(this).prop('disabled',true);
}
}).click();
});
上記で動くのは動きますが。あいうえおを終了すると、いきなり次はさしすせそになります。また、
$('input[type=button][value="次へ"]').on('click',function(){は使っていないので削除すると動きません。動かない理由が分かりません。
済みません。補足を使イキってしまったので。一旦終了させます。
有難う御座いました。
再度質問します。