JavaScriptからHTMLへの値渡し方法
- JavaScript内の変数をHTML内のIF文で判断する方法を紹介します。
- JSPファイル内のJavaScriptで調べた値を、同じJSPファイル内のHTMLへ値を渡す方法を解説します。
- 具体的なサンプルソースを使用して、JavaScriptからHTMLへの値渡しの手順を説明します。
- ベストアンサー
JavaScript→HTMLへ値渡しする方法
お世話になります。 JSPファイル内のJavaScriptで調べた値を、 同じJSPファイル内のHTMLへ値を渡して、 その値をHTML内のIF文で判断して、 HTMLの表示画面内容を、 大まかには、以下のサンプルソースのような流れで 変更したいです。 <script language="JavaScript" type="text/javascript"> <!-- function getInfoAgentUser(){ var agent_user = navigator.userAgent.toLowerCase(); var WinOs = agent_user.indexOf("win") != -1; // 文字列に、"win"が含まれているケース var Msie = agent_user.indexOf("msie") != -1; // 文字列に、"msie"が含まれているケース var errFlg = ""; if(WinOs){ if(Msie){ errFlg = "0"; }else{ errFlg = "1"; } }else{ errFlg = "2"; } } //--> </script> </head> <body onLoad="getInfoAgentUser()"> <c:if test="${errFlg == 1}"> <h1>ブラウザエラー</h1> <div class="main"> <p><c:out value="Internet Explorerを利用してください" /></p> </div> </c:if> <c:if test="${errFlg == 2}"> <h1>OSエラー</h1> <div class="main"> <p><c:out value="Windows XP以上を利用してください" /></p> </div> </c:if> 上記のサンプルソース内の、 JavaScript内のIF文で判断した「errFlg」変数の値を、 <body ～以下で、 <c:if test="${errFlg == 1}"> みたいに判断し分岐して、 HTMLの表示画面内容を 変更したいです。 どのようにすれば、上記の「errFlg」変数の値を JavaScript→HTMLへ値渡し出来るのでしょうか？ 以上になります。 ご存じの方がいらっしゃいましたら教えてください。 宜しくお願いします。
- hiroasa21
- お礼率97% (88/90)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご質問の内容が、さっぱり理解できていないのですが、 ひょっとして、サーバーサイドでの処理（JSP）およびサーバーからの出力、クライアント側の処理（ブラウザ：HTML及びjavascript）を順序立てて考えた時に、時空を遡ろうとしていませんか？ もしもそうであるなら、タイムマシンを作るよりも、最初に環境変数を調べる方がはるかに簡単そう。 （JSPはまったく知らないので、よくわかりませんが） http://iwamode.net/etc/cgi_env_param_sample_jsp.html http://homepage2.nifty.com/sak/w_sak3/doc/sysbrd/servlet_jsp_k06.htm ＞その値をHTML内のIF文で判断して、 の意味が、まったくわかりませんが、 ＞HTMLの表示画面内容を、変更したいです。 ということだけなら、javascriptのみでも可能なのではないでしょうか。 ただし、クライアント側でスクリプトオフにしていると、効果はありませんけれど。
関連するQ&A
- 外部javascriptの読み込み方
下記ソースのjavascriptにて外部javascript内容を読み込もうとしています ==呼び出すファイル(test.htm)========================== <head> <script type="text/javascript" src="common.js"> <!-- function init() { setBrowser(); alert(getBrowser()); } --> </script> </head> <body onload="init();"> てすと </body> </html> ================================================== ==呼び出されるファイル（common.js）=================== <!-- var strBrowser; function setBrowser() { if(navigator.userAgent.indexOf("MSIE") != -1){ // IE strBrowser = "IE"; } else if(navigator.userAgent.indexOf("Firefox") != -1){ // FireFox strBrowser = "Firefox"; } else if(navigator.userAgent.indexOf("Safari") != -1){ // Chrome & Safari strBrowser = "Safari"; } else{ strBrowser = ""; } } function getBrowser() { return strBrowser; } //--> ================================================= これで呼び出す事ができません。 何処が悪いのか、ご指摘頂ければ幸いです。
- ベストアンサー
- JavaScript
- FireFoxでJavascript「window.close()」が効きません。
別ウィンドウを開いて「閉じる」ボタンをクリックするとウィドウを閉じる、というレイアウトを作成しているのですが、 <A HREF="javascript:window.close()">ウインドウを閉じる</A> では、firefoxでは動作しません。 情報を探してみて、以下のようなソースが有効なようなのですが、 <head>の中に以下を記述。 <script type="text/javascript" language="JavaScript"> <!-- function close_win(){ var nvua = navigator.userAgent; if(nvua.indexOf('MSIE') >= 0){ if(nvua.indexOf('MSIE 5.0') == -1) { top.opener = ''; } } else if(nvua.indexOf('Gecko') >= 0){ top.name = 'CLOSE_WINDOW'; wid = window.open('','CLOSE_WINDOW'); } top.close(); } --> </script> で、閉じるボタンを置きたい場所に <A HREF="javascript:close_win()">ウインドウを閉じる</A> が、ローカルで見ている範囲ですが、動作しません。 ページ内リンクみたいにページトップに戻るだけ。。。 ちなみにIEとネスケでは正常に動作しました。 どなたかお分かりになる方、ご教授願えませんか？ 宜しくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- Ajax.Requestで取得したHTMLソースから'href'の値を
Ajax.Requestで取得したHTMLソースから'href'の値を取得する方法について Javascriptにて取得した別ページのHTMLタグから 必要な部分のみ値を取得し、配列に格納することは可能でしょうか？ 以下Javascript ------ var url = "http://test/index.htm"; new Ajax.Request( url, { "method":"get", asynchronous:false, onComplete: function(request) { html = request.responseText; } } ); alert(html); ------ 以下"http://test/index.htm"のHTMLタグ ------ <html> <head> </head> <body> <a href='http://test/index2.htm'>index2</a> <a href='http://test/index3.htm'>index3</a> <div>index4</div> </body> </html> ------ 上記で"http://test/index.htm"のHTMLタグの全てを取得して出力することはできたのですが、 "href"の"http://test/index2.htm" "href"の"http://test/index3.htm"のみ配列に格納したいのです。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- JavascriptでDIV～DIVをリロードで
はじめまして質問いたします。 JavaScriptにて<div id="test">～</div>の間をリロード毎に変更させたいのです。 <div id="test"> <h2>リーロード毎に変更</h2> <div id="contents"> <img src="../images/test.jpg"> <p>テスト要素です</p> </div> </div> 上記の<div id="test">～</div>の中身をページを開いたり、リロードする度に変更させたいのですが、 Javascriptを使用して自動でできるようにしたいのですが、どうかご教授ください。 よろしくお願いします。
- 締切済み
- JavaScript
- Javascriptで外部HTMLの値を取得したい
ＷＥＢ初心者です。 Javascriptを使用して、 外部ＨＴＭＬソースを取得し、その中のある値だけを取得するロジックをご教示ください。 取得した外部ＨＴＭＬソースに正規表現が使えるなら、下記になるかと思います。 /_xyz" value="([^<]+)">/ キャプチャした値を呼び出し元のＨＴＭＬで使用したいです。 ”こんな感じのロジックになります”とご教示いただけますとたすかります。 よろしくお願いいたします。 下記サンプルプログラムを見つけたのですが、 ソース全体ではなくソースの中のある値だけが欲しいです。 --------------------------------------------------------------------------------------------- <?xml version="1.0"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascriptでHTMLのソースを取得</title> <script language="javascript" type="text/javascript"> function createhttprequest(){ var request=null; if("XMLHttpRequest" in window){ request= new XMLHttpRequest(); } else if("ActiveXObject" in window){ try{ request=new ActiveXobject("Msxml2.XMLHTTP"); }catch(e){ try{ request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ } } } return request; } var request; function requestsorce(url){ request=createhttprequest(); request.open("GET",url,true); request.onreadystatechange=sorceget; request.send(null); } function sorceget(){ if (request.readyState == 4 && request.status == 200){ document.form1.sorce.value=request.responseText; } else{ } } </script> </head> <body> テキストボックスにurlを入力してソース取得ボタンを押してください。 <form name="form1"> <input type="text" name="urlbox" size="40"> <input type="button" value="ソース取得" onclick="requestsorce(document.form1.urlbox.value)"> <textarea name="sorce" rows="120" cols="100"> ここにソースを表示 </textarea> </form> </body> </html>
- 締切済み
- JavaScript
- javascript
javascript全くの初心者です。 CLASSに与えた値を条件によって変更することは出来ますか、色々やってみましたが出来ません。以下の例では男を女に変えたいのですが、ご面倒お掛けしますが宜しくお願い致します。 <html> <head> <title>sample</title> <div class = "test">男</div> </head> <script type="text/javascript"> function delAttr() { test= "女"; } </script> <body> <script type="text/javascript"> if test = "女" delAttr(); </script> </body> </html>
- ベストアンサー
- JavaScript
- javascriptの記述について
私は最近javascriptの勉強を始めたプログラム初心者です。 下記のjavascriptについてお聞きしたいです。 ｃｓｓ *{ line-height: 1.5em; } #wrapper{ width: 380px; margin: 16px; } h1{ font-size: 20px; border: solid 2px orange; padding: 2px 4px; margin: 1em 0 0.5em 0; } h2{ background: lightblue; padding: 2px 4px; font-size: 12px; margin: 1em 0 0.5em 0; } p{ font-size: 12px; } .close{ display: none; } .open{}; <script type="text/javascript"> window.addEventListener( 'load', function(event){ var elem = document.getElementById('lnk_closeAll'); elem.addEventListener('click', closeAll, false); var elem = document.getElementById('lnk_openAll'); elem.addEventListener('click', openAll , false); //全見出しに設定 setEventToTitles(); } , false); //開閉関数 function openAll(event){ event.preventDefault(); changeAll(false); } function closeAll(event){ event.preventDefault(); changeAll(true); } //trueならすべて閉じる、falseならすべて展開 function changeAll(close){ var titles = document.getElementsByTagName('h2'); for(var i=0; i<titles.length; i++){ var parent = titles[i].parentNode; var topics = parent.getElementsByTagName('div'); for(var j=0; j<topics.length; j++){ if(close){ topics[0].className = 'close'; } else { topics[0].className = 'open'; } } } } //状態を反転する function setEventToTitles(){ var titles = document.getElementsByTagName('h2'); for(var i=0; i<titles.length; i++){ titles[i].addEventListener('click', toggleTopic, false); } } function toggleTopic(event){ var title = event.currentTarget; var parent = title.parentNode; var topics = parent.getElementsByTagName('div'); if(topics[0].className == 'close'){ topics[0].className = 'open'; } else { topics[0].className = 'close'; } } </script> </head> <body> <div id="wrapper"> <h1>よくある質問と回答</h1> <p> <a id="lnk_closeAll" href="#">すべて閉じる</a> <a id="lnk_openAll" href="#">すべて展開</a> </p> <div id="topic1"> <h2>電源ランプが赤く光り、しばらくすると製品が動かなくなります</h2> <div class="close"> <p>電源ランプが赤く光るのは内蔵バッテリーが消耗していることを示しています。 コンセントを接続して充電してください。</p> </div> </div> <div id="topic2"> <h2>ときどきブザーが鳴りますが、問題ないでしょうか？</h2> <div class="open"> <p>本製品の長時間利用により低温やけどを負うことがあります。 長時間使い続けていることをユーザーに伝えるため、 4時間15分32秒ごとにピッピッという警告音を鳴らすようにしております。</p> </div> </div> <div id="topic3"> <h2>製品を床に落としてしまいました。問題ないでしょうか？</h2> <div class="open"> <p>本製品は高さ1メートルからの落下テスト10万回をパスしております。 ただし、1メートル以上の高さから落下した場合は、 故障する可能性がありますので、お近くのサービスセンターにご相談ください。</p> </div> </div> </div> このプログラムは画像のようにすべて閉じるを押すと説明文が閉じ、 すべて開くを押すと説明文がすべて開きます。 わからない箇所は、 if(topics[0].className == 'close'){ topics[0].className = 'open'; } else { topics[0].className = 'close'; 箇所でどうしてtopics[i]ではなくtopics[0]なのでしょうか。 参考書には「NodeListオブジェクトとして返されますが、必要なのは最初の1つだけなので[0]で先頭要素にアクセスし classNameプロパティに[close]か[open]を設定する」と記載されています。 ですが、なぜ必要なのは最初の1つだけなのでしょうか？ カウンタiを一つづつふやし、一つ筒divに[close]か[open]を設定しないのでしょうか。 試しにtopics[i]にすると動きません。。。 topics[0]だと動くのに。。。
- ベストアンサー
- JavaScript
- javascriptでlabelの値取得
vs2012(c#)で <asp:Label ID="test" runat="server" Text="abc" Visible="true"></asp:Label> の値をjavascriptで取得したいのですが、下記で実行すると l1はnullになり取得できません。 var l1 = document.getElementById("test"); var data = l1.innerText; console.log(data); そのようにすれば取得できるでしょうか
- ベストアンサー
- Microsoft ASP
- JavaScriptで複数のCSVを取得しひとつのCSVごとに１つのs
JavaScriptで複数のCSVを取得しひとつのCSVごとに１つのselectフォームを表示しようとしております。 以下のようなJSを使っているのですが、aryCsvNameの配列にはいっている名前で複数のCSVを呼び込みたいのですが、 getElementById("select***").のところで、うまく***の箇所に配列の値をもっていけません。 aryCsvNameの値と***があえば、それぞれの<div>に表示されるのではないかとは思っているのですが、 それも予想です。 恐れ入りますが、どなたかいい方法をご教授ください。 function loadCSV() { aryCsvName = ["1","2","5","10"]; for (var j = 0; j < aryCsvName.length; j++) { var path = './data/'+aryCsvName[j]+'.csv'; var httpObj = createXMLHttpRequest(handleResult); if (httpObj) { httpObj.open("GET", path, true); httpObj.send(null); } } } function handleResult() { if ((this.readyState == 4) && (this.status == 200)) { var text = getAjaxFilter()(this.responseText); csvData = parseCSV(text); ///ここが不明 //document.getElementById("select***").innerHTML = result; //ここまで } } function parseCSV(str) { var CR = String.fromCharCode(13); var LF = String.fromCharCode(10); var lines = str.split(LF); var csvData = new Array(); for (var i = 0; i < lines.length; i++) { var cells = lines[i].split(","); if( cells.length != 1 ) csvData.push(cells); } return csvData; } function createXMLHttpRequest(cbFunc) { var XMLhttpObject = null; try { XMLhttpObject = new XMLHttpRequest(); } catch(e) { try { XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { return null; } } } if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc; return XMLhttpObject; } function getAjaxFilter() { if (navigator.appVersion.indexOf("KHTML") > -1) { return function(t) { var esc = escape(t); return (esc.indexOf("%u") < 0 && esc.indexOf("%") > -1) ? decodeURIComponent(esc) : t } } else { return function(t) { return t } } } HTML部分 <div id="select1"></div> <div id="select2"></div> <div id="select5"></div> <div id="select10"></div>
- ベストアンサー
- JavaScript
- HTML内への2つのJavaScriptの書き込みについて
お世話になります。 この1週間皆様のお力をお貸しいただいて ようやくほぼ完成というところまでこぎつけました！！ 本当に皆様のご協力に感謝です！ありがとうございます。 HTML内に、JavaScriptファイルへのリンクが2点 そのほかにJ Queryのギャラリーを利用しているため、 HTMLに直接書いてある 下記Javascriptがあります。 $('#thumbs-adv ul.thumbs li').css('opacity', onMouseOutOpacity) .hover( function () { $(this).not('.selected').fadeTo('fast', 1.0); }, function () { $(this).not('.selected').fadeTo('fast', onMouseOutOpacity); } ); $(document).ready(function() { var galleryAdv = $('#gallery-adv').galleriffic('#thumbs-adv', { delay:2000, numThumbs:16, <省略. . . . . . > onTransitionOut:function(callback) { $('#slideshow-adv, #caption-adv').fadeOut('fast', callback); }, onTransitionIn:function() { $('#slideshow-adv, #caption-adv').fadeIn('fast'); }, onPageTransitionOut:function(callback) { $('#thumbs-adv ul.thumbs').fadeOut('fast', callback); }, onPageTransitionIn:function() { $('#thumbs-adv ul.thumbs').fadeIn('fast'); } }); var galleryMin = $('#gallery-min').galleriffic('#thumbs-min', { imageContainerSel:'#slideshow-min', controlsContainerSel:'#controls-min' }); }); ここに、まだ他のJavaScriptをHTMLページ内に 追加したいのですが、追加すると、 J queryのギャラリーの表示がなくなってしまいます。 追加したいJavaScriptは以下です。 <script type="text/javascript" charset="UTF-8"> var M0, M1; /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'load', function () { var cnt = 0, I, o; var UL = document.getElementById('gazou'); var LI = UL.getElementsByTagName('LI'); var MI = document.getElementById('menu-index'); document.getElementById('num1').firstChild.nodeValue = I = LI.length; for (var i = 0; i<I; i++) { o = document.createElement('LI'); o.appendChild(document.createTextNode('○')); o.id = 'idx-' + i; MI.appendChild(o); } (M1 = LI[0]).style.zIndex = 2; }, false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'mouseover', function (evt) { var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/; var p = getParent(e, 'id', 'menu-index'); var n; if (M0) { M0.firstChild.nodeValue = '●'; M0.style.color = ''; M0 = null; } if (p && e.nodeName == 'LI') { e.firstChild.nodeValue = '●'; e.style.color = 'red'; M0 = e; n = e.id.match(/-(\d+$)/)[1]; document.getElementById('num0').firstChild.nodeValue = n - 0 + 1; Image('gazou', n); } }, false); function getParent(node, type, val) { return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } function Image (id, vno) { var a = 100, LI = document.getElementById(id).getElementsByTagName('LI')[vno];if (LI == M1) return; var P = (function L () { M1.style./*@if(1) filter = 'Alpha(opacity=' + a +')' @else@*/ opacity = a/100 +'' /*@end@*/; if ((a-=20)<0) M1.style.zIndex = 0 +'', LI.style.zIndex = 2 +'', M1 = LI; else setTimeout(L, 30); }); LI.style.zIndex = 1; LI.style./*@if(1) filter = 'Alpha(opacity=100)' @else@*/ opacity = '1' /*@end@*/; P(); } // --> </script> HTML内に書き込むJavaScriptは１つでないといけないのでしょうか？ また、この問題を解決するには、どうすればよいでしょうか？ よろしくご教授お願いいたします！！！
- 締切済み
- JavaScript
お礼
「7178722」様 お世話になっております。 ご指摘の通り、時空を遡ろうとしていたことに、 ご回答を見て、気付かせていただきました。 JavaScriptはクライアント（ブラウザが実行されているPC内）、 JSPはサーバ上で、 それぞれ実行されるんでしたね・・・。 ご回答をいただいた後、いろいろ試した結果、 JavaScript内のIF文内で、alert（メッセージボックス）を利用して、 各エラーメッセージを表示させる仕様とすることで、 問題解決と致しました。 お忙しい中、丁寧なご回答をいただきまして、 本当にありがとうございました。