- ベストアンサー
配列に代入したエレメントを操作できない（変数のスコープの問題でしょうか？）
ページ上に複数のブロックを配置しています。ひとつにマウスオーバーすると枠の色が赤くなり、他のものの枠の色がグレーになるようにします。 以下にソースを記します。 <!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=euc-jp"> <title>array</title> <style type="text/css"> div { width: 50%; margin: 5px; padding: 5px; border: 3px solid #bbb; } </style> <script type="text/javascript"> <!-- var blockArr = new Array(); blockArr.push('First'); blockArr.push('Second'); blockArr.push('Third'); blockArr.push('Fourth'); blockArr.push('Fifth'); var blocks = new Array(); function init() { for (var i=0; i<blockArr.length; i++) { var theName = blockArr[i]; blocks[i] = document.getElementById('block' + theName); blocks[i].onmouseover = function() { for (var ii=0; ii<blockArr.length; ii++) { if (i==ii) { // nothing } else { blocks[ii].style.border = '3px solid #bbb'; } } blocks[i].style.border = '3px solid red'; // ←←← 変更箇所 }; } } window.onload = init; //--> </script> </head> <body> <div id="blockFirst">1</div> <div id="blockSecond">2</div> <div id="blockThird">3</div> <div id="blockFourth">4</div> <div id="blockFifth">5</div> </body> </html> FireFox2で表示したところ、これでは blocks[i] has no properties というエラーが出て動作しません。 試しに『// ←←← 変更箇所 』の行の宣言を『this.style.border = '3px solid red';』と this に変えてみたら動作しました。 しかしなぜ blocks[i] で動作しないのでしょうか。
- mataroh
- お礼率100% (5/5)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
これは実行される順序と保持している値を勘違いしているためでしょう blocks[i]のiは ページがロードされたときに実行するinitの中で更新されます したがって initの終了時点では blockArr.lengthと同じの『5』になっています それに比べて iiはdivタグのマウスオーバーが発生した場合に更新されます mouseoverの無名関数の中で if ( i == ii ) と判定していますが iは常に5を保持していますので elseしか実行されないことになります blocks[i]をthisに変更して動作するのは mouseoverのイベントが起きたオブジェクトがthisだからです blocks[5]は存在しませんよね … blocksの添え字は0から4ですから
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
こんな感じでよいのでは？ <html> <head> <style type="text/css"> div { width: 50%; margin: 5px; padding: 5px; border: 3px solid #bbb; } </style> <script type="text/javascript"> blockArr = ['First','Second','Third','Fourth','Fifth']; function init() { for (var i in blockArr){ var obj = document.getElementById('block' + blockArr[i]); obj.onmouseover = function() { for (var j in blockArr){ var obj = document.getElementById('block' + blockArr[j]); obj.style.border = '3px solid #bbb'; } this.style.border = '3px solid red'; } } } window.onload = init; </script> </head> <body> <div id="blockFirst">1</div> <div id="blockSecond">2</div> <div id="blockThird">3</div> <div id="blockFourth">4</div> <div id="blockFifth">5</div> </body> </html>
お礼
回答ありがとうございました。 一度全てのブロックをグレーにしてからひとつを赤にするというやり方ですね。 こちらのほうがよりスマートなコードという印象を持ちました。他の方のやり方を拝見するのは参考になります。
関連するQ&A
- div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？
- 締切済み
- HTML
- 中枠の太さを1pxにしたい
以下の HTML を書いたのですが、外枠の太さは1pxになっていますが、中枠が2pxになってしまいます。中枠も1pxで表示するにはどう修正すればいいでしょうか？ ご教授よろしくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> </head> <body> <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2"> <tr> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Icon</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Name</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Effect</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 111111</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 444444</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 222222</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 555555</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 333333</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 666666</div></div></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- floatがうまくいきません。
以下のスタイルシートに設定したのですが、 #content の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }
- 締切済み
- CSS
- CSSでのレイアウト（Firefox向け）
下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） ┌──────────────┐ ｜┌─────┐┌─────┐│ ｜｜TEXT ｜｜TEXT ｜｜ ｜｜ ｜｜ ｜｜ ｜└─────┘└─────┘│ └──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。
- ベストアンサー
- HTML
- 配列 代入
JavaScript初心者です。 配列の代入で困っています。 var nums=new Array(); for(var i=0;i<3;i++){ nums[i]=i; // ☆ } // nums [0,1,2] ☆の行（コード）をnums.push=i; とするとnumsに2しか入っていないのですが、どういう仕組みでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- このコードを処理速度向上させることはできますか？
このコードを処理速度向上させることはできますか？ <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ function className(str){ var alltag = document.getElementsByTagName("*"); var ary = []; for(var i=0;i<alltag.length;i++){ if("."+alltag[i].className == str){ ary.push(alltag[i]); } } return ary; } window.$ = function(str){ var ID = str.match(/^#(\w+)/), CLASS = str.match(/^\.(\w+)/), TAG = str.match(/^(\w+)|(\*)/), node = str.match(/^doc/)? document: TAG? document.getElementsByTagName(RegExp.$1==""?RegExp.$2:RegExp.$1): ID? document.getElementById(RegExp.$1): CLASS? navigator.appVersion.toLowerCase().indexOf("msie")? className(str): document.getElementsByClassName(RegExp.$1): null; this.style = function(css){ css = css.split(/\:|\;/); if(ID){ for(var j=0;j<css.length;j++) node.style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; }else{ for(var i=0;i<node.length;i++){ for(var j=0;j<css.length;j++) node[i].style[css[j].replace(/\s+/g,"").replace(/\-(\w)/,function($1){$1=$1.substr(1);return $1.toUpperCase()})] = css[j+1]; } } } return this; } window.onload = function(){ var st = new Date().getTime(); for(var i=0;i<10000;i++){ $('#wrap').style("color:#00f; background:#f00; border-left:10px solid #000;"); $('div').style("border-right:10px solid #000; width:100px; height:100px; margin:10px;"); $('.cl').style("border-top:10px solid #000; background:#00f;"); } var end = new Date().getTime(); alert(end-st); } //]]> </script> <title></title> </head> <body> <div id="wrap">aaaaa</div> <div class="cl">bbb</div> <div class="cl">ccc</div> </body> </html> 他にも、もっとこうしたほうが…等ありましたら教えてください。どうか宜しくお願いします。
- 締切済み
- JavaScript
- Javascriptの変数の中に変数を代入するには
Google chart というAPIがあります。これを利用して株価Chartを作ります。 https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart 末尾にGoogle Chartのソースを記載していますが このvar data内の ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] の部分を変更することによりローソクチャートが引けます。 一方、 <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; document.write("" + chart + ""); </script> と記載すると ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] のような株価変数が取得できるjavascriptを作成しました。 この2つを組み合わせると、株価チャートが引けることとなります。 ************************ 現在の苦境状況 ************************ Google chart APIに、下記のように「document.write("" + chart + ""); または "" + chart + "";または + chart + ;」を代入してみたのですが、チャートは表示されません。 変数の中に変数を入れたことが原因と思いますが、どのようにすればいいかアドバイス願います。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ document.write("" + chart + ""); ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> ************************ GoogleChart ************************ <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div>
- ベストアンサー
- JavaScript
- firefoxでdivタグ要素が突き抜ける
お世話になります。 firefoxですとdivタグで指定した高さ・幅を要素が超えると 突き抜けて表示されます。IEだと、指定した幅・高さが大きくなってくれる。 以下のソースで子の要素が親のボックス、子のボックスを突き抜けなくできないでしょうか？ もしかしたら簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #oya { border-right:orange 1px solid; border-top:orange 1px solid; border-left:orange 1px solid; border-bottom:orange 1px solid; } #ko { border-right:green 1px solid; border-top:green 1px solid; border-left:green 1px solid; border-bottom:green 1px solid; } </style> </head> <body> <div id="oya" style="width:200px;height:200px;"> <div id="ko" style="width:100px;height:100px;">ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ<br>ほげ</div> </div> </body> </html>
- ベストアンサー
- HTML
- overflowを使ってのスクロール
CSSのoverflowを使って、ページの一部をスクロールさせたいのですが 完全に下までスクロールができません。 具体的には以下のソースの"div2"をスクロールさせたく、overflowのauto を使っているのですが、一番下までスクロールができません。 どのようにしたらよいか、ご指摘お願いいたします。 HTMLのソースは以下の通りです。 このままコピペしてもらえば動作を確認してもらえると思います。 どうかよろしくお願いいたします。 <html> <head> <style type="text/css"> body { overflow: hidden; } div { border: 1px solid black; } #div2 { height: 100%; overflow: auto; } </style> </head> <body> <div id="div1"></div><br> <div id="div2"></div> </body> <script type="text/javascript"> var text = ""; for (var i=0; i<10; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div1').innerHTML = text; for (var i=0; i<150; i++) text += "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>"; document.getElementById('div2').innerHTML = 'BEGIN<br>' + text + 'END'; </script> </html>
- ベストアンサー
- CSS
- fixedで作ったフロートメニューを中央に配置するには
浮かせたaをbの位置に表示させたいのですが、aは左上に固定されてしまいます。 IE7では上手くいくのですが、FF3では思うように行きません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>TEST</title> <style> html,body{margin:0;padding:0;width:100%;height:100%;} </style> </head> <body> <div style="max-width:780px;width:100%;margin:0px auto;text-align:center;border:solid 1px #AAAAFF;color:#AAAAFF;position:fixed;">a</div> <div style="max-width:780px;width:100%;margin:0px auto;text-align:center;border:solid 1px #FFAAAA;color:#FFAAAA;">b</div> </body> </html>
- 締切済み
- HTML
お礼
回答ありがとうございます。 functionの中でvar宣言した変数が残らないのを、forループでも同様だと勘違いしておりました。 また、無名関数の中身というのは、記述された時点ではなく、イベントが発生した時点で定義されるということですね？ このことは知りませんでした。たいへん参考になりました。