- ベストアンサー
JavaScriptにて『var val2 = "dv" + i;』のdvとは？、超初心者です。
<script type="text/javascript"> <!-- var timerID = ""; function mn(n){ if(timerID != ""){ clearTimeout(timerID); } var val = n; dlt2(); document.getElementById(val).style.visibility="visible"; document.getElementById(val).style.zIndex="1"; } function dlt(){ timerID=setTimeout("dlt2()",100); } function dlt2(){ for (i=1;i<3;i++){ var val2 = "dv" + i; document.getElementById(val2).style.visibility="hidden"; document.getElementById(val2).style.zIndex="0"; } } //--> </script> <style type="text/css"> <!-- a{text-decoration:none;color:gray;} a:hover{color:#000000;} body{color:#000000;font-size:12pt; line-height:150%;font-family:"ＭＳ Ｐゴシック";} table{color:#ffffff;font-size:12pt; line-height:150%;font-family:"ＭＳ Ｐゴシック";} #dv1{ /* ↓ここの position の値がプルダウンメニュー１の表示位置です */ position:absolute;left:12;top:42; background-color:#ffffff;visibility:hidden; border: 1px solid gray; } --> </style> </head> <body> （文字数制限により省略させていただきます） </body> </html> －－－－－－－－－－ 参考URL: http://ryos.info/hp_sakusei/pulldown.htm JavaScriptでプルダウンメニューを作ろうとして、ネットで勉強していますが早速つまずいています。 調べてみましたが、結局解りませんでした。 上記のfunction dlt2()の部分で、『var val2 = "dv" + i;』とあります。 この"dv" とは何を表しているのでしょうか？ 初歩的な質問で申し訳ございません。 教えていただけましたら幸いです。
- himatubu4
- お礼率68% (11/16)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
「dv」単体には意味が無く、そのfor文内で 「val2 = "dv1"」「val2 = "dv2"」になりますよね。 HTMLの中に「dv1」「dv2」と名前の付けられているdivがありますから、そのオブジェクトを指しているようです。
その他の回答 (1)
HTMLの本文が見えないのでわかりませんが、idがdv+(数字)のタグがあるんでしょう。 そのIDを示してます。 <div id="dv1"></div> こんな感じの。
お礼
早速回答くださって有難うございます！ 指摘されて、今日一日の疑問がすっかり解けました。 dv+iで確かに、dv1,dv2となりますね。 プルダウン一つでも、いろいろな作り方があるようなので、混乱してしまいます。 この度は大変助かりました。有難うございます。
関連するQ&A
- 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
- MacIEやＯｐｅｒａでも動作させたい
MacIEやＯｐｅｒａでも動作させたいのですが、わからないのです。宜しくお願いします。 <HEAD> <STYLE TYPE=\"text/css\"> <!-- #links0 { position:absolute; left:430;top:35; z-index:2 ;} .lays { position:absolute; left:70;top:380; width:200;height:160; clip:rect(0,200,160,0); line-height:150%; text-align:center; z-index:0 ;} //--> </STYLE> <SCRIPT LANGUAGE=\"JavaScript\"> <!-- function setBGCOLOR(layName,color){ if(document.getElementById){window.document.getElementById(layName).style.backgroundColor=color;} else{document.layers[layName].bgColor=color;} } function zindexLAYER(layName,zindex){ zindex = zindex - 0; if(document.getElementById){window.document.getElementById(layName).style.zIndex=zindex;} else{document.layers[layName].zIndex=zindex;} } function c02ini(){ setBGCOLOR(\'msg1\',\'#decdce\') setBGCOLOR(\'msg2\',\'#decdce\') } function swtOnZ(layName){ zindexLAYER(\'msg1\',0);zindexLAYER(\'msg2\',0) zindexLAYER(layName,2) } //--> </SCRIPT> </HEAD> <BODY onload=\"c02ini()\" text=\"#522c29\"> <DIV ID=\"links0\"> <A href=\"1.html\" onmouseover=\"swtOnZ (\'msg1\')\">１</A><BR> <P><A href=\"2.html\" onmouseover=\"swtOnZ (\'msg2\')\">２</A><BR> </DIV> <DIV CLASS=\"lays\" ID=\"msg1\"> <FONT>１</FONT> </DIV> <DIV CLASS=\"lays\" ID=\"msg2\"> <FONT>２</FONT> </DIV> </BODY>
- 締切済み
- JavaScript
- サファリでポジション指定のJavascriptがうまく作動しません
詳しい方ぜひお力をお借りしたいのですが。 以前IE用で教えていただいたオンマウスでボックスを中央に配置する スクリプトを教えていただいたのですが、Safariですとこれがうまく 作動してくれません。IEではどんなモニタの大きさでもど真ん中にいくのですが、Safariですと左に寄ってしまうのです。 これをSafariでも正常に機能させるにはどのような記述にすればよいのかを考えていましたがうまくいかないので質問させていただきます。 function show( text ) { var el = document.getElementById( "box" ); document.getElementById( "text" ).innerHTML = text; el.style.visibility = 'hidden'; el.style.display = 'block'; var width = el.clientWidth; el.style.display = 'none'; el.style.visibility = 'visible'; el.style.left = ( document.body.clientWidth - width ) / 2 + document.body.scrollLeft; el.style.top = ( document.body.clientWidth - width ) / 4 + document.body.scrollTop; el.style.display = 'block'; } function hide() { var el = document.getElementById( "box" ); el.style.display = 'none'; } で、 el.style.left = ( document.body.clientWidth - width ) / 2 + document.body.scrollLeft; el.style.top = ( document.body.clientWidth - width ) / 4 + この部分でIEでは問題ないのですが、Safariでは機能しません。 どうかお助けください。 よろしくお願いいたします。
- 締切済み
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>
- ベストアンサー
- JavaScript
- javascript について追加の質問
質問NO6591909＝3/14 10：59の追加の質問です。 素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね？ IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか？（function fx()を9つ別々に書くんでしょうか？・・・・・・）よろしくお願いいたします。 因みにここからhtml↓（さっきも書きましたが、また書いておきます。） <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>
- ベストアンサー
- JavaScript
- hiddenにjavascript関数の戻り値
下記のPHPスクリプト内において、hidden属性で、テキストエリアの文章を 自分自身（deleteUpdate.php）に、POSTメソッドで送信しているのですが、 $text_val = $_POST['text_val']をvar_dump()すると、NULLになって、 テキストエリアで更新した文章が入ってきません。 どこが間違っているのか、教えていただきたいです。 <script language="javascript"> <!-- function getText(){ var text = document.getElementByID('contents').value; return text; } //--> </script> ～ <input type="hidden" name="text_val" id="text_val" value="<script>getText()</script>">
- ベストアンサー
- JavaScript
- javascriptでのフェードイン
javascriptを使用してhtml上の画像をフェードインにて表示したいと思っております。 ネット上の情報とこちらのサイトでのアドバイスを元に以下のソースを使用しておりますが WindowsのIE（6&7）で確認すると「エラー：オブジェクトがありません」と表示されてしまいます。 こちらで確認したところjavascript最後の行の「window.onload～」がエラーの原因となっているようなのですが、 修正する記述方法が分からず困っております。 解決策をご存じの方がおられましたらお手数ですが、 ご教授いただけないでしょうか。 何卒、宜しくお願い申し上げます。 ///javascript file（fade.js）/// document.write("<style type='text/css'>#thephoto1 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto2 {visibility:hidden;}</style>"); document.write("<style type='text/css'>#thephoto3 {visibility:hidden;}</style>"); function initImage() { for(i=1;i<4;i++){ imageId = 'thephoto' + i; image = document.getElementById(imageId); setOpacity(image, 0); image.style.visibility = "visible"; fadeIn(imageId,0); } } function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 25; window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100); } } } function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; // IE/Win obj.style.filter = "alpha(opacity:"+opacity+")"; // Safari<1.2, Konqueror obj.style.KHTMLOpacity = opacity/100; // Older Mozilla and Firefox obj.style.MozOpacity = opacity/100; // Safari 1.2, newer Firefox and Mozilla, CSS3 obj.style.opacity = opacity/100; } window.onload = function() { initImage() } //////////////////////// ///html file/// <html> <head> <script type="text/javascript" src="fade.js"></script> </head> <body> <img src="img_01.jpg" id="thephoto1" /> <img src="img_02.jpg" id="thephoto2" /> <img src="img_03.jpg" id="thephoto3" /> </body> </html> ////////////////////////
- ベストアンサー
- JavaScript
- <html><head>
<html><head> <style type="text/css"> <!-- #loading { position: absolute; /* ロード中に表示する文字列の絶対位置の設定（必須） */ top: 35%; /* 画面の上部からの文字の位置（必須） */ left: 45%; /* 画面の左側からの文字の位置（必須） */ font-style: italic; font-family: Verdana; } --> </style> <script type="text/javascript"> <!-- document.write('<style type="text/css">#doc { visibility: hidden; }<\/style>'); document.write('<div id="loading">Now Loading...<\/div>'); // ロード中に表示する文字列 var i = 0; var ele = document.getElementById("loading"); var str = ele.firstChild.data; function char_loop(ele, str) { ele.innerHTML = str.substring(0, i++ % str.length + 1); } setInterval("char_loop(ele, str);", 100); window.onload = function() { ele.style.display = "none"; document.getElementById("doc").style.visibility = "visible"; } // --> </script> </head> <body> <span id="doc"> ここに本文を表示 </span> </body> </html> 上のような、NewLoading... を作ってみたんですが、 画像のように表の内枠だけ残ってしまいます。 どうにかならないですかね。 ちなみにこの画像のURLは、↓こちらです。 http://shibaken.cool-biz.net/contents02.html お願いします。
- ベストアンサー
- JavaScript
- javascriptにおいてだんだんと処理する
javascriptにおいて質問です。 いま、divタグ内に表などを配置して、大体heightは500pxあるとします。 そのときに、0.3秒毎にdivの高さを30pxくらい減らして、 アニメーションみたくdivの高さを0にして非表示のようにしたいのですが、 組み方で苦労しています。 var oriHeight = $(\"data_div\").offsetHeight; for (var i = eval(oriHeight); i >= 0 ; i--) { val_height = \"\" + i + \"px\"; var timerId = setTimeout(function() { $(\"data_div\").style.height = val_height; }, 300); i=i-30 } //$関数はgetElementIdの省略関数 これだと一気にdivタグが縮んでしまって、だんだんと縮まる ことをしたいのです。 arguments.calleeとか再帰処理とかがポイントでしょうか？？
- ベストアンサー
- JavaScript
- javascript初心者です。
javascript初心者です。 下記のソースコードで、単純に、マウスホーバーで、テキストの内容を切り替えるものですが、 IE8ですと動作しますが、Firefox3.5だと動作しません。 なにか、原因あるのでしょうか。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script language="javascript" type="text/javascript"> function formcalc(formobj){ var val_a= formobj.elements["para_a"].value; var val_b= formobj.elements["para_b"].value formobj.elements["answer"].value = val_a * val_b } function chktext(){ var obj = document.getElementById("id1"); obj.innerText="テキスト変更しました。"; } </script> </head> <body> <form> <input size="10" type="text" name="para_a" value="0" />× <input size="10" type="text" name="para_b" value="0" />= <input size="10" type="text" name="answer" /><br /> <input type="button" name="keisan" value="計算" onclick="formcalc(this.form)" /> </form> <br /><br /><br /><br /> <p id="id1" onMouseOver="this.innerText='受付終了'">最初のテキスト</p> </body> </html>
- ベストアンサー
- JavaScript
お礼
回答本当に有難うございます。 var val2="dv"+i という形でdv1,dv2を表しているとは、奥が深いです。 いろいろな表現方法があるんですね。 やっと次の勉強に移ることができそうです。 有難うございました。