表示させた文字を１つだけ戻す方法は？return?
- JavaScriptのコードを使用して表示させた文字を１つだけ戻す方法を知りたいです。
- 下記のコードでは、if文でelseになった場合にreturnにしていますが、一致しているところまで残して途中からやり直す方法を教えてください。
- また、ハッシュタグとしては、JavaScript, コーディング, リセットのキーワードが使えるかもしれません。
- ベストアンサー
表示させた文字を１つだけ戻す方法は？return?
下記コードのif文のところでelseになった場合にreturnにしています。 returnではなくstLoad()にすれば、全てリセットされ最初からやり直しになりますが、 最初からやり直しでなく、一致しているところまで残して途中からやり直す場合は どのようにすればいいでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script language="JavaScript"> <!-- var i = 1; var stMihon; function stLoad(){ document.getElementById("anser").innerHTML = ""; } function st(n){ stMihon = "1357924680".substring(0,i); document.getElementById("anser").innerHTML += n; if(document.getElementById("anser").innerHTML==stMihon){ i++; }else{ alert("もう一度"); return; //不一致のときに1文字消し入力前に戻す } } //--> </script> <style type="text/css"> p{width:330px; padding:5px; background-color:#ddd;} #anser{color:#f00;padding:10px;width:330px;} table{border:1px solid #000;background-color:#eee;width:200px;height:220px;margin-left:60px;} td{border:1px solid #000;font-size:20px;text-align:center;} </style> </head> <body onload="stLoad()"> <p>下記ボタンを押して1357924680と<br>入力して下さい。</p> <div id="anser"></div> <table> <tr> <td onClick="st(1)">1</td> <td onClick="st(2)">2</td> <td onClick="st(3)">3</td> </tr> <tr> <td onClick="st(4)">4</td> <td onClick="st(5)">5</td> <td onClick="st(6)">6</td> </tr> <tr> <td onClick="st(7)">7</td> <td onClick="st(8)">8</td> <td onClick="st(9)">9</td> </tr> <tr> <td colspan="2" onClick="st(0)">0</td> <td id="en" onClick="st('.')">.</td> </tr> </table> </body> </html>
- tekkenman7
- お礼率70% (150/212)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
入力が間違っていても表示はするということですので、元のスクリプトで (1) 入力した数字をinnerHTMLに追加 (2) 入力した数字が正しいかどうか判定 (3) 間違っていればやり直し となっていたのを、次のようにしたらいいと思います。 (1) innerHTMLは(i-1)文字だけ残して、入力した数字を追加 (2) 入力した数字が正しいかどうか判定 (3) 正しければiを1増やす (4) 間違っていればやり直し function st(n){ stMihon = "1357924680".substr(i-1,1); document.getElementById("anser").innerHTML=document.getElementById("anser").innerHTML.substring(0,i-1) + n; if(n==stMihon){ i++; }else{ alert("正しい数字を入力してください。\nでは、続きから"); //return; //このreturnは不要？？ → 不要でしたね。 } }
その他の回答 (1)
- puddingeater
- ベストアンサー率77% (28/36)
質問のスクリプトは (1) 入力した数字をinnerHTMLに追加 (2) 入力した数字が正しいかどうか判定 (3) 間違っていればやり直し となっていますが、次のように修正します。 (1) 入力した数字が正しいかどうか判定 (2) 正しければ入力した数字をinnerHTMLに追加 (3) 間違っていればやり直し function st(n){ stMihon = "1357924680".substr(i-1,1); if(n==stMihon){ document.getElementById("anser").innerHTML += n; i++; }else{ alert("もう一度"); return; //不一致のときに1文字消し入力前に戻す } }
お礼
ありがとうございます。 間違っていればやり直しができました。 しかし、 ボタンを押した数字が 正しいときだけ表示され、 間違ったときは表示されません。 下記のようにしてみましたが、だめでした。 必ず表示させるためには、どうしたらいいでしょうか？ <script language="JavaScript"> <!-- var i = 1; var stMihon; function stLoad(){ document.getElementById("anser").innerHTML = ""; } function st(n){ stMihon = "1357924680".substr(i-1,1); document.getElementById("anser").innerHTML += n; if(n==stMihon){ i++; }else{ alert("正しい数字を入力してください。\nでは、続きから"); document.getElementById("anser").innerHTML.substr(0,i-1); return; //このreturnは不要？？ } } //--> </script>
関連するQ&A
- ボタン押しで表示した文字を１文字だけ自動で戻す方法
下記コードのif文のところでelseになった場合に、 一致しているところまで残して途中からやり直す場合は どのようにすればいいでしょうか。 ・一致、不一致のいずれも入力値をブラウザ上に表示させる ・不一致のとき、全てリセットさせずに、間違った箇所からやり直させる。 ・一致させる文字が円周率に変更してもできる といったことを可能にしたいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script language="JavaScript"> <!-- var i = 1; var stMihon; function stLoad(){ document.getElementById("anser").innerHTML = ""; } function st(n){ stMihon = "1357924680".substr(i-1,1); document.getElementById("anser").innerHTML += n; if(n==stMihon){ i++; }else{ alert("正しい数字を入力してください。\nでは、続きから"); document.getElementById("anser").innerHTML.substr(0,i-1); return; //このreturnは不要？？ } } //--> </script> <style type="text/css"> p{width:330px; padding:5px; background-color:#ddd;} #anser{color:#f00;padding:10px;width:330px;} table{border:1px solid #000;background-color:#eee;width:200px;height:220px;margin-left:60px;} td{border:1px solid #000;font-size:20px;text-align:center;} </style> </head> <body onload="stLoad()"> <p>下記ボタンを押して1357924680と<br>入力して下さい。</p> <div id="anser"></div> <table> <tr> <td onClick="st(1)">1</td> <td onClick="st(2)">2</td> <td onClick="st(3)">3</td> </tr> <tr> <td onClick="st(4)">4</td> <td onClick="st(5)">5</td> <td onClick="st(6)">6</td> </tr> <tr> <td onClick="st(7)">7</td> <td onClick="st(8)">8</td> <td onClick="st(9)">9</td> </tr> <tr> <td colspan="2" onClick="st(0)">0</td> <td id="en" onClick="st('.')">.</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- これってJavaScriptですか？？
以下のソースはJavaScriptになりますか？ HPを（初心者ながら）作っているのですが JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。 以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか？ <table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML"> タブ１ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML"> タブ２ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML"> タブ３ </div></td><td style="width:100%;border-bottom:1px solid #000"> </td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4"> ここにタブ１の文章 </div></td></tr></tbody></table> <div style="display:none" id="NAME11"> ここにもタブ１の文章 </div><div style="display:none" id="NAME22"> ここにタブ２の文章 </div><div style="display:none" id="NAME33"> ここにタブ３の文章 </div>
- ベストアンサー
- JavaScript
- TABLEの行を非表示にした際の隙間
テーブルの行をクリックアクションにて開閉したいのですが、 開いたテーブルを閉じた際に隙間ができてしまいます。 これはIE6で発生し、FireFox3では隙間無く閉じています。 IE6でも、この隙間を無くすことは可能でしょうか？ ご教授願います。 現状のスクリプトは以下のようにしています。 （クリックするのは左上のプラス／マイナスの画像です） <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <TITLE></TITLE> </HEAD> <BODY> <script type="text/javascript"> function close_list(){ document.getElementById("img").src = '../images/plus.gif'; document.getElementById("img").onclick = new Function(" open_list(); "); document.getElementById("mark").rowSpan = '1'; document.getElementById("tr_yuubin").style.display = 'none'; document.getElementById("tr_ken").style.display = 'none'; document.getElementById("tr_stat").style.display = 'none'; return; } function open_list(){ document.getElementById("img").src = '../images/minus.gif'; document.getElementById("img").onclick = new Function(" close_list(); "); document.getElementById("mark").rowSpan = '5'; document.getElementById("tr_yuubin").style.display = ''; document.getElementById("tr_ken").style.display = ''; document.getElementById("tr_stat").style.display = ''; return; } </script> <FORM> <TABLE width="755" border="1"> <TBODY align="left"> <TR> <TD width="15" align="center" id="mark" valign="top"><img name="img" id="img" src="../images/plus.gif" onclick="open_list()"></TD> <TD width="135" >タロウ </TD> <TD width=""> <INPUT type="checkbox" id="chk" name="chk" value="1">登録 </TD> </TR> <TR id="tr_yuubin" style="display: none;"> <TD width="135">郵便</TD> <TD><input name="yuubin" type="text" id="yuubin" style="width:150px" ></TD> </TR> <TR id="tr_ken" style="display: none;"> <TD width="135">都道府県</TD> <TD> <select style="width:400px"><option> </select> </TD> </TR> <TR height="20" id="tr_stat" style="display: none;"> <TD width="135">ステータス</TD> <TD> </TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>
- 締切済み
- JavaScript
- テーブルの中の文字を縦に表示する方法
テーブルの中の文字を縦に表示する方法はありますか？ 今はわからないので、<br>で無理やり改行しています。 もっとスマートな方法があれば教えてください。 <style type="text/css"> table { width: 50%; height: 20px; border: 2px #2b2b2b solid; } td { border: 2px #2b2b2b solid; } </style> <table> <tr> <td>よこ</td> <td>た<br>て</td> </tr> </table>
- 締切済み
- CSS
- IEにおけるinnerHTMLの記述ミス？
┌───┬───┐ │１行目 │ │ ├───┤ │ │２行目 │ボタン │ ├───┤ │ │３行目 │ │ └───┴───┘ というテーブルで、ボタンを押すごとに２行目が表示、非表示と切り替わるように、下のようなソースを書きました。 IE以外ではうまく行くのですが、IEだと 一回目の押下ではうまく行くのですが、その後が動きません。 ちなみに 最初の押下でエラーの警告がでています。 innerHTMLの記述を消したらそれは無くなりました、、、。 IE以外のブラウザでは上手く行くのですが、 IEではどこがダメなのでしょうか。 基本的なことで申し訳ありませんが、よろしくお願いします。 -------------------------------------------------------------- <script type="text/javascript"> function del() { document.getElementById('row2').style.display="none"; document.getElementById('row1').innerHTML= '<td>1行目</td>'+ '<td rowspan="2"><input type="button" value="2行目を表示" onclick="add()" /></td>' } function add() { userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf("msie") > -1) { document.getElementById('row2').style.display="display"; } else { document.getElementById('row2').style.display="table-row"; } document.getElementById('row1').innerHTML= '<td>1行目</td>'+ '<td rowspan="3"><input type="button" value="2行目を非表示" onclick="del()" /></td>' } </script> <style type="text/css"> table { border-collapse:collapse; } td { border:1px solid #ccc; } </style> <table> <tr id="row1"> <td>1行目</td> <td rowspan="3"><input type="button" value="2行目を非表示" onclick="del()" /></td> </tr> <tr id="row2"> <td>2行目</td> </tr> <tr> <td>3行目</td> </tr> </table>
- ベストアンサー
- JavaScript
- 合計値の表示
コード/品名/単価 01/鰯/10円 02/鮭/20円 というデータがあって --ソースstart-- function codeChange(c, n){ if(document.getElementById){ if(c==01){ document.getElementById("sina"+[n]).innerHTML=("鰯"); }else if(c==02){ document.getElementById("sina"+[n]).innerHTML=("鮭"); } } function suryoChange(s, n){ if(document.getElementById){ if(c==01){ document.getElementById("sum"+[n]).innerHTML=(10*s); }else if(c==02){ document.getElementById("sum"+[n]).innerHTML=(20*s); } }… <table> <tr> <td><input type="text" name="code1" onChange="javascript:codeChange(document.forms(0).code1.value, 1)"></td> <td><div id="sina1"></td> <td><input type="text" name="suryo1" onChange="javascript:suryoChange(document.forms(0).code1.value, 1)"></td> <td><div id="sum1"></td> </tr> <tr> <td><input type="text" name="code2" onChange="javascript:codeChange(document.forms(0).code2.value,2)"></td> <td><div id="sina2"></td> <td><input type="text" name="suryo2" onChange="javascript:suryoChange(document.forms(0).code2.value,2)"></td> <td><div id="sum2"></td> </tr> </table> --ソースend-- <div id="total"></div> で数量の入力値が変わるごとに 各合計のトータルの合計を表示したいのですが やり方がわかりません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptでちゃんと表示されない。
javascriptの参考書通りに書いてるのになぜか出ません。 なぜか、新製品と価額だけしかでません。 リラックスチェアとか価額４０００とかが出ません。 何が原因かわかりません。 何が原因なんでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>はじめてのHTML</title> <style> table{border:solid 1px orange; border-spacing:0pc;} th,td{border:solid 1px orange; padding:4px;} </style> <script type="text/javascript"> var prod_name={'リラックスチェア','リラックスデスク','ブックスタンド'}; var prod_price ={4000,12000,800}; </script> </head> <body> <h1>新商品価額表</h1> <table> <thead> <tr><th>製品名</th><th>価額</th></tr> </thead> <tbody> <script type="text/javascript"> document.write('<tr>'); document.write('<td>'+ prod_name[0]+'</td>'); document.write('<td>'+ prod_price[0]+'</td>'); document.write('</tr>'); </script> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
- テーブルの枠線
IEブラウザのバージョンにより、表示が変わることはわかっているのですが どうしても解決できないので質問させていただきます。 対応ブラウザがIE8からIE11という前提なので、まずはIE8で試してみました。 きれいに表示できました。 が、IE11で表示したら、見出しは枠線が表示されました。 でも、中の罫線が表示されません。（画像添付） IE9、IE10はソフトを入れ直しが必要なので、また未確認です。 <meta>タグを入れてもダメでした。（IE=edge） IE8を捨ててもよいので、IE11で枠線を表示させるにはどうしたらよいのか、 ご教授願えないでしょうか？ widthの指定もしているし、border-styleも記述しているつもりですが IE11では何が足りないのか、わかりません。 以下にソースコードを記載しますので よろしくお願いいたします。 ※まだdebug中なので、罫線以外につきましては無視願います。 <html> <head> <style type="text/css"> #midashi { border:2px solid #ffffff; border-collapse:collapse; } #table1 { border:2px solid #3d9f51; border-collapse:collapse; } #table0 { border:2px solid #83ca51; border-collapse:collapse; float:left; margin-right:-3px; } #table1 .td0{ width:15px; height:20px; border: none; text-align:left; font-size:80%; } #table1 .td1{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "dotted"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "solid"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2bg{ background-color:#83ca51; } #table0 .td3{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#83ca51; border-collapse:collapse; text-align:center; font-size:80%; } #table0 .td3non{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#ffffff; border-collapse:collapse; text-align:center; font-size:80%; } </style> </head> <body> <table id="table0"> <script type="text/javascript"> //**************************************************************************** //--- 番号 for(i=0; i<9; i++){ document.write('<tr>'); if( i == 0){ document.write('<td class="td3non"> </td>') }else{ document.write('<td class="td3">部屋' + i + '</td>') } document.write('</tr>'); } //--- //**************************************************************************** </script> </table> <table id="table1"> <script type="text/javascript"> //**************************************************************************** //--- 見出し document.write('<tr>'); for(j=0; j<48; j++){ // 30分単位の一日分 if( j%2 == 1){ document.write('<td class="td2 td2bg"></td>') // 時間表示無し }else{ document.write('<td class="td0 td2bg">' + (j/2) + '</td>') // 時間表示有り } } document.write('</tr>'); //--- //**************************************************************************** //**************************************************************************** //--- 時間テーブル for(i=0; i<8; i++){ // i:部屋の数 document.write('<tr>'); for(j=0; j<45; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2"></td>') // solid }else{ document.write('<td class="td1"></td>') // dotted } } for(j=0; j<3; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2" style="font-size:50%;text-align:center;">・</td>') // solid }else{ document.write('<td class="td1" style="font-size:50%;text-align:center;">・</td>') // dotted } } document.write('</tr>'); //--- //**************************************************************************** } </script> </table> </body> </html>
- ベストアンサー
- CSS
- Divの幅指定を無視して子テーブルの幅に合わせて全体が伸びてしまいます
はじめて投稿します。 下のHTMLを表示したとき、menuの部分が狭くなった上に画面自体のスクロールバーが出て横に広がってしまいます。 赤色のテーブルをウィンドウいっぱいに広げた状態で、オレンジ色のテーブルを囲むDIVタグを赤色のテーブルの80%にしたいのです。 オレンジ色テーブルのwidthの80%になっているとか？ でも、オレンジ色のテーブルのwidthがウィンドウに収まるような値なら、意図する表示になるのですが・・・。 どう直したらいいのでしょうか。 <html> <script> function hoge(){ document.getElementById("s1").innerText = "t1=" + document.getElementById("t1").offsetWidth + "*" + document.getElementById("t1").offsetHeight + ",d1=" + document.getElementById("d1").offsetWidth + "*" + document.getElementById("d1").offsetHeight + ",t2=" + document.getElementById("t2").offsetWidth + "*" + document.getElementById("t2").offsetHeight + ",d2=" + document.getElementById("d2").offsetWidth + "*" + document.getElementById("d2").offsetHeight + ",t3=" + document.getElementById("t3").offsetWidth + "*" + document.getElementById("t3").offsetHeight; } </script> <body onload="hoge()"> <span id="s1"></span> <table width="100%" height="95%" border="1" style="background-color:red;" id="t1"> <tr> <td valign="top" width="200px">menu</td> <td valign="top"> <div style="background-color:yellow" id="d1"> <table border="1" style="background-color:blue" width="90%" height="100%" id="t2"> <tr><td>hoge1</td></tr> <tr><td>hoge2</td></tr> <tr> <td> <div style="background-color:pink;overflow:auto;height:80%;width:80%" id="d2"> <table id="t3" width="3250" height="500" style="background-color:orange"> <tr> <td>hoge3</td> </tr> </table> </div> </td> </tr> </table> </div> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- tableの外枠をCSSで表示させない方法
HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか？ HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。 線種はsolidを使いたいです。 よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css"> <!-- table.sample { width:550px; height:auto; border:solid 1px; border-collapse:collapse; border-left:none; border-right:none; } .sample th { width:100px; border:solid 1px; } .sample tr { border:solid 1px; } .sample td { border:solid 1px; } --> </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
お礼
ありがとうございました。