JavaScript初心者の質問:戻り値にタグを含めたい

このQ&Aのポイント
  • JavaScript初心者が戻り値にタグを含めたい場合、<b>タグが文字として表示される問題が発生します。
  • タグをタグとして機能させるためには、クッキーの値を取得する関数で<b>タグを返す必要があります。
  • クッキーが存在する場合は、取得した値を<b>タグで囲んで表示し、存在しない場合は登録が必要というメッセージを表示するようにします。
回答を見る
  • ベストアンサー

戻り値の中にタグを含め、タグとして機能させる方法

JavaScript初心者です。 以下の様なプログラムで、戻り値の中にタグを含めたところ、 それがタグとしてではなく、文字として表示されて困っています。 お助け下さい。 プログラムの内容は、当該ページにアクセスした時、 訪れた人が、cookienameという名前のクッキーを持っていない場合は 登録が必要です、というメッセージを表示し、 クッキーを持っている場合は、そのクッキーの内容を<b>タグで挟んだものを 表示するプログラムです。 ですが、以下だと、<b>タグがタグとして機能せず、<b>という文字として 表示されてしまうのです。 よろしくお願い致します。 ----------------------------------------------- <script type="text/JavaScript" src="js/jquery.js"></script> <script type="text/JavaScript"> // クッキーの値を取得 getCookie(クッキー名); // function getCookie(cookiename){ var st=""; var ed=""; if(document.cookie.length>0){ // クッキーの値を取り出す st=document.cookie.indexOf(cookiename + "="); if(st!=-1){ st=st+cookiename.length+1; ed=document.cookie.indexOf(";",st); if(ed==-1) ed=document.cookie.length; var nakami=document.cookie.substring(st,ed); // クッキーがある場合、差し替え表示する内容(この中の<b>タグがタグとして機能しません) return "<b>"+nakami+"</b>"; } } return ""; } // クッキーがある場合、上記の内容を差し替え表示する function visitorName(){ if(getCookie('cookiename')){ var cookiename = getCookie('cookiename'); $("table.visitor").text(cookiename); } } $(function() { visitorName(); }); </script> </head> <body> <table class="visitor" border="0" cellspacing="0" cellpadding="0" width=220> <tr><td align="right">登録が必要です。</td></tr></table> </body> </html>

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 ぱっと見たところでは、 $("table.visitor").text(cookiename); が $("table.visitor").html(cookiename); では無いでしょうか。

keeeeeeen
質問者

お礼

おはようございます。 回答、ありがとうございます! 基礎的な質問すぎて恐縮です。 (「戻り値 タグを入れる」等でいくらググっても、それらしき答えが見つからなかったので、質問させていただきました) 最初の$("t... という回答から、textだから、textとして解釈されて、 タグが活きないのか!と思い $("table.visitor").tag(cookiename); という(捏造)表現を試みたのですが(当然のとごく駄目で) 回答いただいた $("table.visitor").html(cookiename); に差し替えたところ、うまくいきました。 最初の回答のおかげで、自分なりに頭を使い、この表現の仕方が強く頭に刻まれました。 回答、ありがとうございました!

関連するQ&A

  • Cookie情報の取得と表示

    特定のCookieを取得し、ページに表示させるスクリプトについて質問させていただきます。 現在、Cookieに保存されたハンドルネーム(2バイト文字も含む)の情報を取得し、 ページ上に表示させるスクリプトを作成しています。 Googleで検索した参考サイトを参考に以下のスクリプトを試してみましたが、 2バイト文字(”ああああ”等)については表示されないか、”%54%454%121%”のような文字化けになってしまいます。「test」のような1バイト文字については普通に表示されます。 いろいろ調べた結果、システムからCookieに保存する際に、文字コードがUTF8ではなく、SJISで保存されているため、「test」などの1バイト文字は普通に取得できますが、「ああああ」などの2バイト文字についてはバイナリデータとして扱われ、取得できない?ようになっているようです。 単にシステムからCookieに保存する際に「UTF8」で保存すればいいのかもしれませんが、可能ならJavascriptの何らかの処理で解決できればと考えております。 どなたかお分かりになれば、ご教授いただけませんでしょうか? 以下が現在テストしているスクリプトコードです。 <script language="JavaScript"> <!-- function GetCookie(name){ var st=""; var ed=""; var temp=""; if (document.cookie.length>0){ st=document.cookie.indexOf(name + "="); if (st!=-1){ st=st+name.length+1; ed=document.cookie.indexOf(";",st); if (ed==-1)ed=document.cookie.length; temp = document.cookie.substring(st,ed); } } decodeURIComponent(temp); return ""; } // --></script> <script language="JavaScript"> <!-- User = GetCookie('fmcHN'); // ハンドルネーム取得 document.write(User,"さん"); // --></script>

  • 基礎的なif文プログラムが動きません

    お世話になります。 Javascript初心者です。 とても基礎的なif文が動かなくて困っています。 ある名前のクッキーが既に存在していたら、あるページへリダイレクトさせる、というプログラムです。 クッキーの有無を確認するには <script type="text/JavaScript"> function getCookie(クッキー名) { if (document.cookie.length>0) { 実行文 } return ""; } </script> で、いける事が分かりました。 また、一方、リダイレクトするには location.href='アドレス'; で、いける事がわかりました。 そこで、これを組み合わせて、 <script type="text/JavaScript"> function getCookie(クッキー名) { if (document.cookie.length>0) { location.href='アドレス'; } return ""; } </script> とやってみたのですが、これが思う様に動きません。 どうしたら動く様になるのか、教示いただけると幸いです。

  • クッキー取得処理のジャバスクリプトを拾ってきたんですが、壊れているのか効きません。

    これなんですが、firefoxIE6とどれも効いてくれないのですが、なぜなんでしょうか? 僕の設定がおかしいのでしょうか。 head内に設置しているんですが、どうすれば効いてくれるようになるんでしょうか? <script type="text/javascript"> <!-- //ページ読み込み時に発生する。(bodyのonLoadイベントで呼び出し) function init() { //クッキー取得処理を呼び出し、戻り値をcoocに代入 var cooc = getCookie(); //戻り値がOKの場合はクッキーが存在するのでb.htmlに飛ばす if (cooc == "OK") { location.href="b.htm"; } } //クッキー取得(取得できればOK、できなければNGを返す) function getCookie(){ //当日日付取得 var today = new Date().getTime(); //クッキー取得 var doc = document.cookie+";".indexOf("test="); //クッキーが取得できなければindexOfで-1が返されるのでif文で判別 if(doc != -1){ return("OK"); } else { //取得できなければクッキーを食べさせる。(expires=有効期限) document.cookie = "test=1;expires="+new Date(today + (60 * 60 * 24 * 1000 * 1)); return("NG"); } return(""); } //--> </script>

  • サイト訪問者に対して1度だけ実行したい

    サイト訪問者に対してあるJavaScriptを1度だけ実行したいのですがよい方法はないでしょうか? 下記コードのようにクッキーを利用して初めての訪問者に対してメッセージを表示させるコードを利用して初めての訪問者に対してJavaScriptを実行させるようにはできないでしょうか? <script language="JavaScript"><!-- var key="freekeyword"; var n=getCookie(key); if(n=="") { alert("はじめまして!\nようこそ"); }else{ alert("\n"+n+"回目の訪問ありがとうございます"); } n++; setCookie(key,n); function getCookie(key) { var s,e; var c=document.cookie+";"; var b=c.indexOf(key,0); if(b!=-1) { c=c.substring(b,c.length); s=c.indexOf("=",0)+1 e=c.indexOf(";",s); return(unescape(c.substring(s,e))); } return(""); } function setCookie(key,n) { var myDate=new Date(); myDate.setTime(myDate.getTime()+6*30*24*60*60*1000); document.cookie=" "+key+"="+escape(n)+"; expires="+myDate.toGMTString(); } // --></script>

  • クッキーを発行するドメイン名を指定する方法

    function getCookie(keyname){ var tmp = document.cookie + ";"; var index1 = tmp.indexOf(keyname, 0); if(index1 != -1){ tmp = tmp.substring(index1, tmp.length); var index2 = tmp.indexOf("=", 0) + 1; var index3 = tmp.indexOf(";", index2); return(unescape(tmp.substring(index2, index3))); } } function setCookie(keyname, val){ var tmp = keyname + "=" + escape(val) + ";"; var gmt = new Date(); gmt.setTime(gmt.getTime() + 9*60*60*1000 + 24*60*60*1000*365); tmp += "expires=" + gmt.toGMTString(); document.cookie = tmp; } function backFunc(){history.back();} function backEntry(){window.location = "rank2.cgi?mode=show&rank=$IN{'rank'}";} function backOperate(){document.form1.submit();} function startFunc(){ if("$FORM{'savecookie'}" != "save"){return;} if(getCookie("dakenId") != "$FORM{'para3'}"){setCookie("dakenId", "$FORM{'para3'}");} if(getCookie("dakenPass") != "$FORM{'para4'}"){setCookie("dakenPass", "$FORM{'para4'}");} } 現在は、http://ドメイン.com/cgi-bin/abc/ このような階層にクッキーが保存されています。 これを、http://ドメイン.com/cgi-bin/に保存するには、上記スクリプトをどのように変更すればよろしいのでしょうか。 発行したクッキーの参照可能なサイト (URL) として domain 値と path 値があるそうですが、自分なりにここ二日間勉強し続けましたが、クッキーについての知識はゼロに近いため、どうしても自力では解決できそうにありません。 どなたかご存知のかた、何卒宜しくお願いいたします。

  • JavaScriptでの時間割り作成について

    <form> <br> <table border="3" bordercolor="#994C00" align="center" bgcolor="#FFDFAA"> <tr align="center"><th>時間</th><th>科目</th><th>教室</th><th>備考</th></tr> <tr align="center"><td width="20" height="80">1</td><td width="70"><span id="sbj1"></span></td> <td width="60"><span id="crm1"></span></td><td width="100"><span id="com1"></span></td> <tr align="center"><td width="20" height="80">2</td><td width="70"><span id="sbj2"></span></td> <td width="60"><span id="crm2"></span></td><td width="100"><span id="com2"></span></td> <tr align="center"><td width="20" height="80">3</td><td width="70"><span id="sbj3"></span></td> <td width="60"><span id="crm3"></span></td><td width="100"><span id="com3"></span></td> <tr align="center"><td width="20" height="80">4</td><td width="70"><span id="sbj4"></span></td> <td width="60"><span id="crm4"></span></td><td width="100"><span id="com4"></span></td> <tr align="center"><td width="20" height="80">5</td><td width="70"><span id="sbj5"></span></td> <td width="60"><span id="crm5"></span></td><td width="100"><span id="com5"></span></td> <span id="testarea"></span> </form> </body> <script> <!-- // Set virtual screen width size to 320 pixels // 下の一行は使う時に外す。エラーが出たら消す。 monaca.viewport({width: 320}); function setCookie(c_name,value,expiredays){ // pathの指定 変数名 var path = location.pathname; // pathをフォルダ毎に指定する場合のIE対策 var paths = new Array(); paths = path.split("/"); if(paths[paths.length-1] != ""){ paths[paths.length-1] = ""; path = paths.join("/"); } // 有効期限の日付 これがないと編集できない var extime = new Date().getTime(); var cltime = new Date(extime + (60*60*24*1000*expiredays)); var exdate = cltime.toUTCString(); // クッキーに保存する文字列を生成 これがないと保存できない var s=""; s += c_name +"="+ escape(value);// 値はエンコードしておく s += "; path="+ path; if(expiredays){ s += "; expires=" +exdate+"; "; }else{ s += "; "; } // クッキーに保存 document.cookie=s; } function getCookie(c_name){ var st=""; var ed=""; if(document.cookie.length>0){ // クッキーの値を取り出す st=document.cookie.indexOf(c_name + "="); if(st!=-1){ st=st+c_name.length+1; ed=document.cookie.indexOf(";",st); if(ed==-1) ed=document.cookie.length; // 値をデコードして返す return unescape(document.cookie.substring(st,ed)); } } return ""; } //変数設定 if(getCookie('sects1')){var sect1 = getCookie('sects1');}else{var sect1 = "科目1,教室,備考";} if(getCookie('sects2')){var sect2 = getCookie('sects2');}else{var sect2 = "科目2,教室,備考";} if(getCookie('sects3')){var sect3 = getCookie('sects3');}else{var sect3 = "科目3,教室,備考";} if(getCookie('sects4')){var sect4 = getCookie('sects4');}else{var sect4 = "科目4,教室,備考";} if(getCookie('sects5')){var sect5 = getCookie('sects5');}else{var sect5 = "科目5,教室,備考";} var sects = new Array(sect1,sect2,sect3,sect4,sect5); //時間割編集ここから function editj(a){ var secname = new Array('sects1','sects2','sects3','sects4','sects5'); editsec = window.prompt("「科目,教室,備考」の順に入力してください", sects[a]); if(editsec){ secookie = secname[a]; setCookie(secookie,editsec,365); window.alert("完了しました!"); location.reload(); } } //時間割編集ここまで //時間割表示 for (i = 0; i < 5; i = i + 1){ j = i + 1; wari = sects[i].split( "," ); var subj = "sbj" + j; var clrm = "crm" + j; var comt = "com" + j; if(wari[0]){ document.getElementById(subj).innerHTML = wari[0]; } if(wari[1]){ document.getElementById(clrm).innerHTML = wari[1]; } document.getElementById(comt).innerHTML = wari[2] + "<br><input type=button value='編集' onClick='editj(" + i + ")'>"; } //時間割表示ここまで --> </script> というコードです これは月曜日のシートで火曜日、水曜日・・・と土曜日まであります このコードで月曜日の時間割を変更すると火曜日、水曜日などすべてのシートが変更されてしまいます シートごとに保存する方法ってありますか? JavaScriptを始めたばかりなのでわかりやすく教えてほしいです><

  • クッキーの保存時間

    クッキー保存のジャバスクリプトを拾ってきました。 いろいろあって、クッキーの保存の期間を次の24:00(夜の12時)までにしたいのです。 今の状態だと、おそらく24時間保存されると思います。 今のプログラム↓ <script type="text/javascript"> <!-- //ページ読み込み時に発生する。(bodyのonLoadイベントで呼び出し) function init() { //クッキー取得処理を呼び出し、戻り値をcoocに代入 var cooc = getCookie(); //戻り値がOKの場合はクッキーが存在するのでb.htmlに飛ばす if (cooc == "OK") { location.href="b.htm"; } } //クッキー取得(取得できればOK、できなければNGを返す) function getCookie(){ //当日日付取得 var today = new Date().getTime(); //クッキー取得 var doc = document.cookie+";".indexOf("test="); //クッキーが取得できなければindexOfで-1が返されるのでif文で判別 if(doc != -1){ return("OK"); } else { //取得できなければクッキーを食べさせる。(expires=有効期限) document.cookie = "test=1;expires="+new Date(today + (60 * 60 * 24 * 1000 * 1)); return("NG"); } return(""); } //--> </script> ↑↑ までです。 expires="+new Date(today + (60 * 60 * 24 * 1000 * 1)); の部分が保存期間だと思います。 これだとおそらく24時間保存されます。 ここを次の24:00(夜の12時)までも保存期限にしたいのです。 わかりにくいとは思いますが、わかりやすい回答をお願いいたします。 検索するにも方法がわからなかったので質問させていただいております。

  • JavaScriptのtable保存について

    先日時間割り表を作り以下のコードを書きました これをアプリにして自分のスマホに入れたのですがAndroidのためcookieが対応していません そこでlocalStorageを使えば可能ということを聞きました <body background="img/st18.png"> <center> <font style="font-size:30pt;"> <font color="#4795F4"><b><i>Monday</i></b></font> </font> <br><br> <a href="sat.html"><img src="img/blsat.gif" width="50" height="25"></a> <a href="index.html"><img src="img/blhome.gif" width="50" height="25"></a> <a href="tue.html"><img src="img/bltue.gif" width="50" height="25"></a> <form> <br> <table border="3" bordercolor="#4795F4" align="center" bgcolor="#DDFFFA"> <tr align="center"><th>時間</th><th>科目</th><th>教室</th><th>備考</th></tr> <tr align="center"><td width="20" height="80">1</td><td width="70"><span id="sbj1"></span></td> <td width="60"><span id="crm1"></span></td><td width="100"><span id="com1"></span></td> <tr align="center"><td width="20" height="80">2</td><td width="70"><span id="sbj2"></span></td> <td width="60"><span id="crm2"></span></td><td width="100"><span id="com2"></span></td> <tr align="center"><td width="20" height="80">3</td><td width="70"><span id="sbj3"></span></td> <td width="60"><span id="crm3"></span></td><td width="100"><span id="com3"></span></td> <tr align="center"><td width="20" height="80">4</td><td width="70"><span id="sbj4"></span></td> <td width="60"><span id="crm4"></span></td><td width="100"><span id="com4"></span></td> <tr align="center"><td width="20" height="80">5</td><td width="70"><span id="sbj5"></span></td> <td width="60"><span id="crm5"></span></td><td width="100"><span id="com5"></span></td> <span id="testarea"></span> </form> </body> <script> <!-- monaca.viewport({width: 320}); function setCookie(c_name,value,expiredays){ // pathの指定 変数名 var path = location.pathname; // pathをフォルダ毎に指定する場合のIE対策 var paths = new Array(); paths = path.split("/"); if(paths[paths.length-1] != ""){ paths[paths.length-1] = ""; path = paths.join("/"); } // 有効期限の日付 これがないと編集できない var extime = new Date().getTime(); var cltime = new Date(extime + (60*60*24*1000*expiredays)); var exdate = cltime.toUTCString(); // クッキーに保存する文字列を生成 これがないと保存できない var s=""; s += c_name +"="+ escape(value);// 値はエンコードしておく s += "; path="+ path; if(expiredays){ s += "; expires=" +exdate+"; "; }else{ s += "; "; } // クッキーに保存 document.cookie=s; } function getCookie(c_name){ var st=""; var ed=""; if(document.cookie.length>0){ // クッキーの値を取り出す st=document.cookie.indexOf(c_name + "="); if(st!=-1){ st=st+c_name.length+1; ed=document.cookie.indexOf(";",st); if(ed==-1) ed=document.cookie.length; // 値をデコードして返す return unescape(document.cookie.substring(st,ed)); } } return ""; } //変数設定 if(getCookie('mon_sects1')){var sect1 = getCookie('mon_sects1');}else{var sect1 = "科目1,教室,備考";} if(getCookie('mon_sects2')){var sect2 = getCookie('mon_sects2');}else{var sect2 = "科目2,教室,備考";} if(getCookie('mon_sects3')){var sect3 = getCookie('mon_sects3');}else{var sect3 = "科目3,教室,備考";} if(getCookie('mon_sects4')){var sect4 = getCookie('mon_sects4');}else{var sect4 = "科目4,教室,備考";} if(getCookie('mon_sects5')){var sect5 = getCookie('mon_sects5');}else{var sect5 = "科目5,教室,備考";} var sects = new Array(sect1,sect2,sect3,sect4,sect5); //時間割編集ここから function editj(a){ var secname = new Array('mon_sects1','mon_sects2','mon_sects3','mon_sects4','mon_sects5'); editsec = window.prompt("「科目,教室,備考」の順に入力してください", sects[a]); if(editsec){ secookie = secname[a]; setCookie(secookie,editsec,365); location.reload(); } } //時間割編集ここまで //時間割表示 for (i = 0; i < 5; i = i + 1){ j = i + 1; wari = sects[i].split( "," ); var subj = "sbj" + j; var clrm = "crm" + j; var comt = "com" + j; if(wari[0]){ document.getElementById(subj).innerHTML = wari[0]; } if(wari[1]){ document.getElementById(clrm).innerHTML = wari[1]; } document.getElementById(comt).innerHTML = wari[2] + "<br><img src='img/bledit.gif' width='50' height='20' onClick='editj(" + i + ")'>"; } これをlocalStorageで保存するにはどうすればできますか? もしもcookieを使ってもAndroidで保存できる方法があれば教えてください

  • 外部指定するスクリプトが動きません。

    友人とHPを一緒に作っています。 小説は友人が書き、私が変換しアップしているのすが いろいろと作ってるうちに、ジャバスクリプトを外部指定にした方がページが軽くなると知りました。 さっそく実行したのですが、コンパイルエラーと表示され全く動かないのです。 以下は名前の変換を埋め込んだものになります。 (別のページで変換した名前を読み取ってくれるスクリプトになります。) 変換する本体は~jsのシートには記述していません。 以下をjsのシートに記述しました。 コピペしましたので、記号等そのままです。 <!-- DreamMaker2 by Season(URL:http://homepage1.nifty.com/mystaff/) ---> var CookieID = "Dream4"; function getCookie(key) { if (document.cookie){ index = document.cookie.indexOf(key, 0); if (index != -1) { val_start = (document.cookie.indexOf("=", index) + 1); val_end = document.cookie.indexOf(";", index); if (val_end == -1){ val_end = document.cookie.length; } return(unescape(document.cookie.substring(val_start, val_end))); } } return(null); } var getname = getCookie(CookieID); // クッキーが無い場合は初期値を表示する if (getname == null || getname == "null") getname = "名前,名前,名前,名前,"; names = getname.split(","); 他のページに小窓を表示させるジャバスクリプトのシートをおいてますが なんら異常なく動いてます。 上記のスクリプトに、バックスラッシュをいれて文をつなげてみてもエラー。 設置してもエラーが出て動きません。 何とか動かしたいのです。 どうかよろしくお願いします。

  • jQuery ランダムで並べ替えた配列を保持したい

    以下のような配列があって、ランダムに表示しようと思っています。 var col = new Array("red","blue","yellow","green","white"); たとえば、他のページに遷移して戻ってきたときに、 順番を保持しておいて、同じ順番で表示するのが最終目的です。 (同じセッション内ならシャッフルしない) cookieを使おうと以下のように試みています。 シャッフルした値を colRandomCookieというcookieに保管し、 次、ロードした際に、colRandomCookieが有れば、 colRandomCookieのvalueを取り出し、 無ければ、シャッフルする…という考え方です。 しかし、IE7でうまく動きません。IE8以降は大丈夫でした。 IE7はcookie自体、書き込めていないようです。 下記スクリプト内、どこか間違っているところがありますでしょうか? $(function(){ if(getCookie('colRandomCookie')){ var colRandomCookie = getCookie('colRandomCookie'); // カンマで分割し配列に格納 colRandom = colRandomCookie.split(","); }else { var col = new Array("red","blue","yellow","green","white"); var shuffle = function() {return Math.random()-0.5}; var colRandom = col.sort(shuffle); colRandom = colRandom.toString(); //setCookie setCookie('colRandomCookie', '' + colRandom +''); } document.write(colRandom); }); // getCookie function getCookie(key) { var cookieString = document.cookie; var cookieKeyArray = cookieString.split(";"); for (var i=0; i<cookieKeyArray.length; i++) { var targetCookie = cookieKeyArray[i]; targetCookie = targetCookie.replace(/^\s+|\s+$/g, ""); var valueIndex = targetCookie.indexOf("="); if (targetCookie.substring(0, valueIndex) == key) { return(unescape(targetCookie.slice(valueIndex + 1))); } } return ""; } // setCookie function setCookie(key, value) { var cookieString = key + "=" + escape(value) + "; "; // Cookie set document.cookie = cookieString; } もしくはcookieを使わなくても実現可能であれば 他の方法でもご教授いただけたら助かります。 詳しい方、何卒、宜しくお願いいたします。

専門家に質問してみよう