- ベストアンサー
オブジェクトがありませんとエラーが出る！IEで動きません
arexisの回答
- arexis
- ベストアンサー率66% (66/99)
前にサンプルで貰った物からイベントの付加をメソッドを使った方法に変えたようですね。 メソッドを使う方法にすると、呼ばれた関数内のでのthis の意味がIEの場合は変ってしまうのでオブジェクト不明になってるんだと思います。 ちょっと重複する指示などもあったので、もう少しスクリプトを丸めておきました。 もう少し丸め込む事できますが、この状態なら理解もしやすいかと。 (ミスもあるかもしれません) <html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"><!-- /* 何度も使うので関数化 */ function addMyEvent(obj,type,func){ if(window.addEventListener){ obj.addEventListener(type, func, false) } else{ if(window.attachEvent) obj.attachEvent("on"+type, func); } } /* windowにonloadイベント付加 */ addMyEvent(window,'load',loadScript); /* 呼ばれる関数 */ function loadScript(){ flag=false; var Menu = new Array("menu1","menu2","menu3"); for(i=0;i<Menu.length;i++){ var XMenu = document.getElementById(Menu[i]); /* 各menuにマウスダウンイベント付加と、thisにあたるオブジェクト渡し */ addMyEvent(XMenu,'mousedown',function(o){ return function(){ dragOn(o) } }(XMenu) ); } } /* マウスアップ、マウスムーブは 何度もイベントを作るのは変なので dragOn関数にいれずにドキュメントへのイベント付加を1度だけ実行 */ addMyEvent(document,'mouseup',function(){ flag=false; }); addMyEvent(document,'mousemove',dragMove); //ドラッグ関数 function dragOn(el){ flag=true; target=el; } function dragMove(evt){ if (!flag) return; x = evt.clientX - 60; y = evt.clientY -75; target.style.top = y+"px"; target.style.left = x +"px"; } // --></script></head> <body> <!-- 各メニューで自分自身をドラッグ開始するように，関数を呼ぶ --> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html> これで希望通り動きますか？
関連するQ&A
- メニュー3つとも個々にドロップして移動したいのですが
メニュー3つとも個々にドロップして移動したいのですが、どのように すれば良いのでしょうか。 お願いします。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- //2つ適応 window.onload=function(){ flag = false; offx = 80; offy = 100; document.getElementById("menu1").onmousedown= function dragOn(){ flag = true;} window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; document.getElementById("menu1").style.top = event.y-offx; document.getElementById("menu1").style.left = event.x-offy; return false;} } // --></script> </head> <body> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;">メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;">メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> </body> </html>
- ベストアンサー
- JavaScript
- javascriptで困っています。教えてください
javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に移動させたいのですが、上手くいきません。教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!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 = 50; } var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = 200; } </script> </body> </html>
- ベストアンサー
- 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
- Firefoxで表示できないのは何故でしょう？
お世話になります IE6、Operaでは表示できたのですがFirefoxでは表示できませんでした（＞＜） 何か見落としがあるのでしょうか？ <script language="javascript"> <!-- window.onload = function() { n=document.getElementById("div1").innerText; if(n == "a0"){ document.getElementById("img1").style.display = "block"; document.getElementById("img1").style.top = "100px"; document.getElementById("img1").style.left = "100px"; } if(n == "a"){ document.getElementById("img2").style.display = "block"; document.getElementById("img2").style.top = "100px"; document.getElementById("img2").style.left = "200px"; } } //--> </script> <div id="div1">a</div> <form action="test.cgi" method="post"> <input type="hidden"name="a" value="leap_day"> <input type="image" src="sample0.gif" id="img1" style="position:absolute;display:none;"> </form> <form action="test.cgi" method="post"> <input type="hidden"name="b" value="leap_day"> <input type="image" src="sample1.gif" id="img2" style="position:absolute;display:none;"> </form> n=document.getElementById("div1").innerText; if(n == "a0"){ } if(n == "a") { } を消すと表示はできるのですが・・・
- ベストアンサー
- JavaScript
- input要素の入力制限について
<div id="pict"></div> <form action="post" id="f1"> <ul id="elementSize"> <li><label>縦<input type="text" name="height" value="500" />px</label></li> <li><label>横<input type="text" name="width" value="500" />px</label></li> </ul> </form> このような入力欄で、0～9以外の文字が入力された場合と、801以上の数字が入力された場合に、入力欄の後ろに「800以下の数字を入力してください」という文表示させ、800以下の数値が入力されたらこの文を消すようにしたいです。 function $(e){ return document.getElementById(e); } function WindowOnLoad(){ var heightStr = document.createTextNode("800以下の数字を半角で入力してください"); $("f1").height.onblur = function(){ if(this.value.match(/[^0-9]+/)||this.value>800){ $("elementSize").getElementsByTagName("li")[0].appendChild(heightStr); }else{ if($("elementSize").getElementsByTagName("li")[0].lastChild==heightStr){ $("elementSize").getElementsByTagName("li")[0].removeChild(heightStr); } $("pict").style.height = this.value + "px"; } } } if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); }} if(window.addEventListener){ window.addEventListener("load", WindowOnLoad, false); }else{ window.attachEvent("onload", WindowOnLoad); } 今、上記のようなJavaScriptを書いて、実装は出来ているのですが、 もっとコードを短く出来ないかと思い質問させていただきました。 よろしくお願いします。
- ベストアンサー
- JavaScript
- クリックしたリンクの色を保持して、<object>にそのリンクを表示させる
下記のプログラムは、クリックしたリンクの色を保持して、<object>にそのリンクを表示させるようになっています。 プログラムの流れは、 （１）test1のリンクをクリックする （２）test1の背景を黄色/文字を太文字に変更 （３）<div id="objarea">にtest1のリンクを表示 （４）次のリンク（test2）がクリックされるまで（２）を保持。クリックされたらtest2のリンクの背景を黄色/文字を太文字に変更。 （５）（１）～（４）の繰り返し。 をすると言う、感じです。ですが、「（３）の<div id="objarea">にtest1のリンクを表示」と言う動作ができなく、リンクの色の保持しか動作しません。 どこがいけないのか分からなくて困っています。どうぞよろしくお願いします。 [サンプルプログラム] <style type="text/css"> <!-- .object { width: 400px; height: 400px; border: 1px solid #000000; } #menu a{ color:#0000ff; text-decoration:none; } #menu .hoge{ color:#ff0000; background-Color:#ffff00; font-weight:bold; } --> </style> <script type="text/javascript"> <!-- function changeObj(url){ document.getElementById('objarea').innerHTML = '<object data="' + url + '" type="text/html"><\/object>'; } //--> </script> <script type="text/javascript"> <!-- window.onload=function(){ setColor(); } function setColor(){ var menu=document.getElementById("menu"); var tags=menu.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].onclick=function(){ var pp=this.parentNode.parentNode; var tags=pp.getElementsByTagName("a"); for (var i=0;i<tags.length;i++){ tags[i].className=""; } this.className="hoge"; } } } if (window.attachEvent){ window.attachEvent('onclick', setColor); window.attachEvent('onclick', changeObj); } else { window.addEventListener('onclick', setColor, false); window.addEventListener('onclick', changeObj, false); } //--> </script> </head> <body> <div id="objarea"> <object data="http://yahoo.co.jp" type="text/html"></object> </div> <ul id="menu"> <li><a href="#" onclick="changeObj('http://yahoo.co.jp'); return false;">test1</a></li> <li><a href="#" onclick="changeObj('http://www.google.co.jp/'); return false;">test2</a></li> </ul> </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
- アドバイスお願いします
今 ビルダー１１で １．メインメニューをワンクリックでサブメニューが表示／非表示に切り替り ２．メインメニューをクリックすると他のサブメニューが自動的に閉じる この機能を製作していますが、なかなか上手く出来ません アドバイスお願いします JavaScriptソースは、まったくのシロートでがお願いします <script language="JavaScript"> <!-- function msl(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='block' else if(document.all)document.all(idmn).style.display='block' } function kks(idmn){ if(document.getElementById) document.getElementById(idmn).style.display='none' else if(document.all)document.all(idmn).style.display='none' } //--> </script> <style type="text/css"> <!-- .menu{ background-color : olive; width : 100px; } .sub{ display : none } --> </style> HTMLソース <div>Menu_Ａ</div> <ul> <li>sub_1 <li>sub_2 <li>sub_3 </ul> <div>Menu_Ｂ</div> <ul> <li>sub_1 <li>sub_2 <li>sub_3 </ul> <div>Menu_Ｃ</div> <ul> <li>sub_1 <li>sub_2 <li>sub_3 </ul>
- 締切済み
- JavaScript
- オブジェクトがぶつかった時の処理
<script type="text/javascript"> <!-- var imgStar ,imgMoon, timer; var dx = 6, dy = 4, x = 40, y = 160; function startMove(){ if (document.getElementById){ imgStar = document.getElementById("star"); imgMoon = document.getElementById("moon"); timer = setInterval("moveImg()",50); } } function moveImg(){ imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; imgMoon.style.left = (440-x) + "px"; imgMoon.style.top = (320-y) + "px"; x = x + dx; y = y + dy; if (x<=40 || x >= 400) dx = -dx; if (y<=40 || y >= 280) dy = -dy; } function stopTimer() { if (window.clearInterval) clearInterval(timer); } //--> </script> 星と月がぶつかると、お互い逆方向にはね返るようにしたいのですが、この場合どうすれば良いでしょうか？
- 締切済み
- JavaScript
- BOXがロールオーバーで開閉するインターフェース
よろしくお願いします。 javascript初心者です。 今WEBサイトを構築してして BOXがロールオーバーで開閉するインターフェースを作りたくて 本を買って勉強しているのですがうまく動作しません。。 HTMLは ーーーーーーーーーーーーーーーーーーーーーーーーー <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type"content="text/css"/> <meta http-equiv="Content-Script-Type"content="text/javascript"/> <title>テスト</title> <link href="css/1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java/java.js"></script> </head> <body> <body onload="boxMove()"> <div id="mybox1"class="box" style="top:0px;left:0px;"></div> <div id="mybox2"class="box" style="top:0px;left:250px;"></div> <div id="mybox3"class="box" style="top:0px;left:500px;"></div> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー CSS ----------- .box{ position:absolute; width:250px; height:200px; } #mybox1{ background-color:#FF9900; } #mybox2{ background-color:#BBEE55; } #mybox3{ background-color:#AAEEFF; } body{ color:#FFFFFF; margin:0; padding:0; overflow:hidden; } javascript --------------------------------- var myTarget=700; var speed=2; function myboxCmove(){ var myPos = eval(document.getElementById('mybox2').style. left.replace("px","")); myPos += (myTargetC-myPos)/speed; document.getElementById('mybox2').style.left = myPos+"px"; setTimeout("myboxCmove()",10); } function myboxRmove(){ var myPos = eval(document.getElementById('mybox3').style. left.replace("px","")); myPos += (myTargetR-myPos)/speed; document.getElementById('mybox3').style.left = myPos+"px"; setTimeout("myboxRmove()",10); } var pageWidth; var pageHeight; function setTarget1(){ myTargetC = pageWidth-100; mytargetR = pageWidth-50; } function setTarget2(){ myTargetC = 50; mytargetR = pageWidth-50; } function setTarget3(){ myTargetC = 50; mytargetR = 100; } function config(){ if(document.all){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = window.innerWidth; pageHeight = window.innerHeight; } myTargetC = pageWidth/3; myTargetR = pageWidth/3*2; document.getElementById('mybox1').style.width = (pageWidth-100)+"px"; document.getElementById('mybox1').style.height = (pageHeight-100)+"px"; document.getElementById('mybox2').style.width = (pageWidth-100)+"px"; document.getElementById('mybox2').style.height = (pageHeight-100)+"px"; document.getElementById('mybox3').style.width = (pageWidth-100)+"px"; document.getElementById('mybox3').style.height = (pageHeight-100)+"px"; } <body onload="config();myboxCmove();myboxRmove();"onresize="config()"> <div id="mybox1" class="box" style="top:0px; left:0px;" onmouseover="setTarget1()"></div> <div id="mybox2" class="box" style="top:0px; left:250px;" onmouseover="setTarget2()"></div> <div id="mybox3" class="box" style="top:0px; left:500px;" onmouseover="setTarget3()"></div> -------------------------------------------------- テストとして本を参考にやってみたのですがなにがいけないのかまったくわかりません。どなたかご教授お願い致します。
- ベストアンサー
- JavaScript