javascriptでクラスを使った要素の移動方法
- javascript初心者ですが、クラスを使って要素の移動を試みました。
- しかし、うまく動作せず困っています。
- どのようにすれば要素とクラスを紐づけることができるのでしょうか？
- ベストアンサー
javascriptで困っています。教えてください
javascript初心者です。javascriptでクラスのようなものを扱えると知り、いろいろ調べながら取り組んでいます。 html <div id="a"></div> css #a{ width:100px; height:100px; background-color:#0F0; } javascriptでクラスを作って function Character(x,y){ this.ele = document.getElementById("a"); this.x = x; this.y = y; this.move = function () { this.x += 100; this.y += 100; this.ele.style.left = this.x; this.ele.style.top = this.y; } } var cha = new Character(10,10); cha.move(); としたら、緑の正方形が座標(100,100)あるのかと思っていたのですが、うまくいきませんでした。 javascriptのクラスとhtmlの要素を紐づけるにはどうしたらいいのでしょうか？教えてください。
- dkong
- お礼率86% (170/197)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<div id="a"></div> よりも上にスクリプトを書いたりしていない？
その他の回答 (3)
- itu1989
- ベストアンサー率44% (37/83)
「this.ele = document.getElementById("a");」がhtmlの「<div id="a"></div>」より後で実行される必要があります。 なので、初期化を行う用のメソッドを用意してbodyのonloadイベント時に呼び出せばhtml構成後に呼び出されます。 後、他の人が言って下さってるスタイルのpositionが設定できていれば動くはずです var cha; function init(){ cha = new Character(10,10); } function Character(x,y){ ...省略 } <body onload="init(); cha.move();"> <div id="a"></div> (1)座標を指定する時はpositionを指定しよう (2)getElementByIdする場合はhtml構成後に取得しよう
お礼
ありがとうございます。（１）（２）きちんんとすれば、うまくいきました。
- gorusura
- ベストアンサー率59% (25/42)
実は、座標は、数値ではないんです。 width:100px; height:100px; のように。 つまり、'100px' のように指定すれば、動きますよ。 ところで、this.move = .... という風に毎回メソッドを作成されていますが、その様なことは通常せず、 function Character(x,y){ this.ele = document.getElementById("a"); this.x = x; this.y = y; } Character.prototype.move = function () {......} ってやると、より クラス っぽくなりますよ！
お礼
ありがとうございます。pxをつけるのを忘れていました。
- askaaska
- ベストアンサー率35% (1455/4149)
惜しいわ すごく惜しい スタイルシートの topとleftが有効になる条件を満たしていないのよ positionを指定してあげないといけないわ
お礼
早速ありがとうございます。
補足
bodyにposition:relative div #aにposition:absoluteを設定したのですが、うまくいきません。設定しかた間違っていますか？
関連するQ&A
- javascriptで困っています。教えてください
javascript初心者です。以前javascriptでクラスについていろいろな方にアドバイスをいただき、疑問が解決しました。ありがとうございました。 そこで、そのクラスから作ったインスタンスを移動させようとしているのですが、うまくいきません。 html <body onload="init();"> <div id="a"></div> </body> css body{ position:relative; } #a{ width:100px; height:100px; position:absolute; background-color:#0F0; } javascript function Character(x,y){ this.ele = document.getElementById("a"); this.x = x; this.y = y; this.move = function () { this.x += 10; this.y += 10; this.ele.style.left = this.x+"px"; this.ele.style.top = this.y+"px"; } } function init(){ var cha = new Character(10,10); var timer; timer = setInterval("loop()",1000); } function loop(){ cha.move(); } としたら、緑の正方形がx方向、y方向に移動１秒毎に10pxずつ増えながら移動していくと思っていたのですが、うまくいきませんでした。 setIntervalを使わず、var cha = new Character(10,10);の後にcha.move();cha.move();cha.move();c1.move();cha.move();とすると、座標(60,60)に緑の正方形が現れます。 緑の正方形を移動させるにはどうしたらいいのでしょうか。教えてください。
- ベストアンサー
- JavaScript
- javascriptで困っています
javascriptで、スマホでタッチしたところに四角を描いて、それをtouchmoveイベントで取得した位置に動かし、ドラッグして、はなしたところでその四角を消すというのを作 ろうとしています。思っているように上手く動かないのですが、どのように修正すればいいのでしょうか？少し動いた所で止まってしまい、touchmoveイベントの位置の値を取得 できてないように思います。四角なしで試すとtouchmoveイベントの位置の値を 取得できます 教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <title>test</title> <style type="text/css"> #panel_board{ width:320px; height:384px; position:relative; } #move_panel{ width:64px; height:64px; position:absolute; background-color:#0F9; z-index:10; } </style> <script type="text/javascript" charset="utf-8"> <!-- function init() { var panel_board = document.getElementById("panel_board"); panel_board.addEventListener("touchstart", function(e){ //クリックしたの場所のマス目 var x = e.touches[0].pageX; var y = e.touches[0].pageY; // 新規に要素div（タグ）を生成 var ele = document.createElement("div"); //idをつける ele.id = "move_panel"; //生成した要素の位置を決める ele.style.left=x+"px"; ele.style.top=y+"px"; // panel_boardに生成した要素を追加 panel_board.appendChild(ele); }, false); panel_board.addEventListener("touchmove", function(e){ //動いた位置を取得 var xx = e.touches[0].pageX; var yy = e.touches[0].pageY; //move_panelを動かす document.getElementById("move_panel").style.left = xx+'px'; document.getElementById("move_panel").style.top = yy+'px'; //位置を表示 document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = xx; document.getElementById("txt2").innerHTML = yy; }, false); panel_board.addEventListener("touchend", function(e){ //要素を消す var mp = document.getElementById("move_panel"); mp.parentNode.removeChild(mp); }, false); } // --> </script> </head> <body onLoad="init();"> <div id="panel_board"> </div> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </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
- javascriptで困っています
初心者webプログラマーです javascriptでエンドロールのようなものを作ろうとしています。以下の１つのhtmlファイルで作ると動くのですが <html> <head> <title>エンドロール</title> <style type="text/css"> #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } </style> </head> <body onLoad="setInterval('endroll()', 50);"> <script type="text/javascript"> var y = 320; function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } </script> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> これを、htmlファイル、cssファイル、jsファイルに分けてつくると、動かなくなります-----index.html---------------------------------------------------------------------- <html> <head> <link rel="stylesheet" href="endroll.css" type="text/css" /> <script src="endroll.js"></script> <title>エンドロール</title> </head> <body> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> -------endroll.css--------------------------------------------------------------- @charset "utf-8"; #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } ---------endroll.js-------------------------------------------------------------- window.onload = function(){ start_endroll(); } var y = 320; // 繰り返し処理の内容 function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } // 繰り返し処理の開始 function start_endroll() { timerID = setInterval('endroll()',50); } いろいろ調べてみたのですが、解決できませんでした。長い質問になりましたが、どなたか教えていただければありがたいです。よろしくお願いします。
- 締切済み
- JavaScript
- Javascriptで星と月の２つの画像を動かしたいのですが…
星は動きますが、月が動いてくれません。どこが間違ってるのかわからないので、誰かわかる方、教えていただきたいです。よろしくお願いします；； <html> <head> <title>オブジェクトを動かす</title> <style type="text/css"> div {font:30pt ; color:white ; z-index:2} #box {position:absolute ; left:50px ; top:50px; width:400px;height:280px ; background-color:black ; z-index:1} #title1 {position:absolute; left:100px ; top:100px} #title2 {position:absolute; left:80px ; top:50px} #star {position:absolute; left:50px ; top:170px ; z-index:3} #moon {position:absolute; left:50px ; top:170px ; z-index:3} </style> <script type="text/javascript"> var imgStar; var imgMoon; var timerA; var timerB; var x = 50; var y = 170; var dx = 6; var dy = 4; var syototsu = 0; var colorname = "black"; function startMove() { imgStar = document.getElementById("star"); timerA = setInterval("moveImgA()", 50); } function startMoon() { imgMoon = document.getElementById("moon"); timerB = setInterval("moveImgB()", 50); } function moveImgA() { if(syototsu == 1) changecolor(); imgStar.style.left = x + "px"; imgStar.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function moveImgB() { if(syototsu == 1) changecolor(); imgMoon.style.left = x + "px"; imgMoon.style.top = y + "px"; x = x + dx; y = y + dy; if(x<=50 || x >= 410) { dx = -dx; syototsu = 1; } if(y<=50 || y >= 290) { dy = -dy; syototsu = 1; } } function changecolor(){ if(colorname == "black"){ colorname = "maroon"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; syototsu = 0; } function stopTimerA(){ clearInterval(timerA); } function stopTimerB(){ clearInterval(timerB); } </script> </head> <body onload="startMove();" onunload="stopTimerA();"> <body onload="startMoon();" onunload="stopTimerB();"> <div id="box"></div> <div id="title1">StarLight</div> <div id="star"><img src="star.png" width="40" height="40"></div> <div id="title2">MoonLight</div> <div id="moon"><img src="moon.png" width="40" height="40"></div> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- javascript バウンス
javascriptで、月と星を動かしたいのですが…… 星は動くけど、月が動きません。 初歩的なミスだと思いますし、いっぱい間違えてると思いますが… 助けて下さい！ <html> <head> <title>Ｍoon & Ｓtar</title> <style type="text/css"> div{font:30pt; color:white; z-index:2} div2{font:30pt; color:white; z-index:3} #box{position:absolute; left:50px; top:50px; width:400px; height:280px; background-color:black; z-index:1} #title{position:absolute; left:100px; top:100px} #title2{position:absolute; left:200px; top:200px} #star{position:absolute; left:50px; top:170px; z-index:3} #moon{position:absolute; left:200px; top:170px; z-index:3} </style> <script type="text/javascript"> var imgStar,imgMoon,timer,timer2; var x = 50; //星のX座標 var y = 170; //星のY座標 var dx = 6; //星が１ステップごとに動くXの長さ var dy = 4; //星が１ステップごとに動くYの長さ var syototsu = 0; //境界に衝突したら"1"、していなければ"0" var colorname="black"; //ボックスの背景色 var mx = 100; //月のX座標 var my = 170; //月のY座標 var mdx = 6; //月が１ステップごとに動くXの長さ var mdy = 4; //月が１ステップごとに動くYの長さ var msyototsu = 0; //月境界に衝突したら"1"、していなければ"0" function startMove(){ imgStar = document.getElementById("star"); //IDが"star"のオブジェクトを「imgStarオブジェクトに」 timer = setInterval("moveImg()",50); imgMoon = document.getElementById("moon"); //IDが"moon"のオブジェクトを「imgMoonオブジェクトに」 timer2 = setInterval("moveImg2()",60); } function moveImg(){ if(syototsu == 1) changecolor(); imgStar.style.left = x + "px"; //前回計算しておいた場所(x,y)に画像を表示 imgStar.style.top = y + "px"; //(単位をつけて代入していることに注意！) x = x + dx; y = y + dy; if(x<=50 || x>=410){ dx = -dx; //次のステップの場所がxの領域外であれば、xの移動方向を逆転 syototsu = 1; } if(y<=50 || y>=290){ dy = -dy; //次のステップの場所がyの領域外であれば、yの移動方向を逆転 syototsu = 1; } } function moveImg2(){ if(msyototsu == 1) changecolor2(); imgMoon.style.right = mx + "px"; //前回計算しておいた場所(x,y)に画像を表示 imgMoon.style.bottom = my + "px"; //(単位をつけて代入していることに注意！) mx = mx + dx; my = my + dy; if(mx<=50 || mx>410){ mdx = -dx; //次のステップの場所がxの領域外であれば、xの移動方向を逆転 msyototsu = 1; } if(my<=50 || my>=290){ mdy = -mdy; //次のステップの場所がyの領域外であれば、yの移動方向を逆転 msyototsu = 1; } } function changecolor(){ if(syototsu == 1){ colorname = "maroon"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; syototsu = 0; } function changecolor2(){ if(msyototsu = 0){ colorname = "aqua"; } else { colorname = "black"; } document.getElementById("box").style.backgroundColor = colorname; msyototsu = 0; } function stopTimer(){ clearInterval(timer); } </script> </head> <body onload="startMove();startMove2();" onunload="stopTimer();"> <div id="box"></div> <div id="title">Star Light</div> <div id="title2">Moon Light</div> <div id="star"><img src="star.png" width="40" height="40"></div> <div id="moon"><img src="moon.png" width="40" height="40"></div> </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で困っています。教えてください
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でsetInterval()
JavascriptでsetInterval()を指定時間後に実行したいのですが、方法が分かりません。 Javascriptは別ファイルになっています。 <div id=header_ko> <img src="data/ball.gif" name="ball" style="position:relative;left:100px;top:15px;" onclick="setInterval('moveBall()',25)"> </div> //ボールを右に少しずつ動かします。 //ＪＳファイルは外部にあり、呼び出します x=100; y=1; function moveBall() { if(x<775){ x+=y; document.ball.style.left=x; } } //xが７７４のところまで、行ったら、ボールの動きが止まります。 ボールが止まってもプログラムは動いていると聞いて、 setInterval()を使用して、プログラムの上でも停止させたいのですが、 方法が分かりません。 Javascript初心者です。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 以下のJAVASCRIPTが、動作しないのですが、その原因がわかりませ
以下のJAVASCRIPTが、動作しないのですが、その原因がわかりません。助けてください <html> <head> <script type="text/javascript"> var x=200,y=100; var dx=10,dy=10; function move() { setTimeout("move()",100); var ball=document.getElementById("ball"); x+=dx; y+=dy; ball.style.left=x; ball.style.top=y; if (x<=50 || x+10>=450) dx=-dx; if (y<=50 || y+10>=450) dy=-dy; } </script> </head> <body onLoad="move()"> <img src="wall.png" style="position:absolute;left:46;top:46"> <img id="ball" src="ball.png" style="position:absolute;left:200;top:100"> </body> </html>
- 締切済み
- JavaScript
お礼
<div id="a"></div>よりも上にスクリプトを書いてました。初歩的なミスをしていました。