WinFuture-Forum.de: Javascript Problem: Object In Object Bewegen - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
  • 3 Seiten +
  • 1
  • 2
  • 3

Javascript Problem: Object In Object Bewegen


#1 Mitglied ist offline   Iso 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 14. Mai 03
  • Reputation: 0
  • Wohnort:Hörstel
  • Interessen:Computer<br />Parties<br />Mädels...

  geschrieben 28. Februar 2007 - 18:06

Hi Leute,

da ich ein absoluter Neuling auf dem Gebiet von JS bin, funktioniert natürlich direkt das erste Programm nicht. Es ist eine Schulaufgabe und wir sollen dort programmieren, dass es ein Rechteck gibt, wodrin wieder rum sich ein kleines Rechteck befindet, welches sich nur in dem äußeren Rechteck bewegen darf.
Problem bei mir ist, dass sich einfach gar nichts tut.
Wäre nett wenn mir wer auf die Sprünge helfen könnte ^_^

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<title>Aufgabe 2a</title>
		<script type="text/javascript">
		var x = 0;
		var y = 0;
		var height = getObj('box').style.height;
		var width = getObj('box').style.width;
		var xTempo = 5;
		var yTempo = 5;
		
		function init(){
			startAnimation();
		}
		
		function startAnimation(){
			setInterval("animate()",10);
		}
		
		function animate(){
			if(x>=width){
				xTempo = -5;
			}
			if(x<=0){
				xTempo = 5;
			}
			if(y>=height){
				yTempo = -5;
			}
			if(y<=0){
				yTempo = 5;
			}
			x += xTempo;
			y += yTempo;
			shiftTo()
		}
		
		function shiftTo(){
			getObj('rect').style.left = x + "px";
			getObj('rect').style.top = y + "px";
		}
		
		function getObj(elementID){
			return document.getElementByID(elementID);
		}
		</script>
		
		<style type="text/css">
			#box { border: solid; border-width: 1; background: navy; height: 300px; width: 400px; z-index: 1}
			#rect { border: solid; border-width: 1; background: yellow; height: 20px; width: 20px; z-index: 2;}
		</style>
	</head>
	<body onLoad="init();">
	
	<div id="box">
	<div id="rect"></div>
	</div>
	
	</body>
</html>

Dieser Beitrag wurde von Iso bearbeitet: 28. Februar 2007 - 18:07

Asus F3JP-Z53 Notebook:
Intel Core 2 Duo T7200 @ 2 Ghz
Mobile Radeon X1700 256 MB
2048 MB DDR2-Ram
160 GB Hitachi HDD
Ubuntu 9.04 / Windows XP SP 3
0

Anzeige



#2 Mitglied ist offline   Iso 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 14. Mai 03
  • Reputation: 0
  • Wohnort:Hörstel
  • Interessen:Computer<br />Parties<br />Mädels...

geschrieben 28. Februar 2007 - 23:31

*push*
Asus F3JP-Z53 Notebook:
Intel Core 2 Duo T7200 @ 2 Ghz
Mobile Radeon X1700 256 MB
2048 MB DDR2-Ram
160 GB Hitachi HDD
Ubuntu 9.04 / Windows XP SP 3
0

#3 Mitglied ist offline   Graumagier 

  • Gruppe: aktive Mitglieder
  • Beiträge: 8.811
  • Beigetreten: 01. März 04
  • Reputation: 1
  • Geschlecht:Männlich
  • Wohnort:Graz, Österreich

geschrieben 28. Februar 2007 - 23:47

Hab's selber nicht getestet, aber was sagt denn die JS-Konsole?
"If you make something idiot proof, someone will invent a better idiot." - Marvin

For Emails always use OpenPGP. My KeyID: 0xA1E011A4
0

#4 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.947
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 01. März 2007 - 08:40

Zitat

return document.getElementByID(elementID);

fällt dir was auf?
Tipp: Case-Sensitive :P
0

#5 Mitglied ist offline   Iso 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 14. Mai 03
  • Reputation: 0
  • Wohnort:Hörstel
  • Interessen:Computer<br />Parties<br />Mädels...

geschrieben 01. März 2007 - 11:40

Mist, das D am Ende der Funktion darf natürlich nicht groß sein -.-

Ok, aber nu habe ich auch festgestellt, dass ein div-element keine Eigenschaften wie height, width, top, left haben kann, zumindest laut http://de.selfhtml.org/javascript/objekte/...lemente.htm#div, oder verstehe ich da nun etwas falsch?

Oder ist dafür dann das style-Object innerhalb eines Objectes wie z.B. ein div zuständig?
document.rect.style.top z.B. ?

Dieser Beitrag wurde von Iso bearbeitet: 01. März 2007 - 11:44

Asus F3JP-Z53 Notebook:
Intel Core 2 Duo T7200 @ 2 Ghz
Mobile Radeon X1700 256 MB
2048 MB DDR2-Ram
160 GB Hitachi HDD
Ubuntu 9.04 / Windows XP SP 3
0

#6 Mitglied ist offline   Graumagier 

  • Gruppe: aktive Mitglieder
  • Beiträge: 8.811
  • Beigetreten: 01. März 04
  • Reputation: 1
  • Geschlecht:Männlich
  • Wohnort:Graz, Österreich

geschrieben 01. März 2007 - 11:44

Haben sie nicht, aber über "style" solltest du dennoch darauf zurückgreifen können.
"If you make something idiot proof, someone will invent a better idiot." - Marvin

For Emails always use OpenPGP. My KeyID: 0xA1E011A4
0

#7 Mitglied ist offline   Iso 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 14. Mai 03
  • Reputation: 0
  • Wohnort:Hörstel
  • Interessen:Computer<br />Parties<br />Mädels...

geschrieben 01. März 2007 - 11:52

Also die Fehlerkonsole meint:
"getObj("box") has no properties" , warum, weiß ich aber auch nicht.
Hier mal der verbesserte Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<title>opdracht 2a</title>
		<script type="text/javascript">
		var x = 0;
		var y = 0;
		var height = getObj('box').style.height;
		var width = getObj('box').style.width;
		var xTempo = 5;
		var yTempo = 5;
		
		function init(){
			startAnimation();
		}
		
		function startAnimation(){
			setInterval("animate()",10);
		}
		
		function animate(){
			if(x>=width){
				xTempo = -5;
			}
			if(x<=0){
				xTempo = 5;
			}
			if(y>=height){
				yTempo = -5;
			}
			if(y<=0){
				yTempo = 5;
			}
			x += xTempo;
			y += yTempo;
			shiftTo()
		}
		
		function shiftTo(){
			getObj('rect').style.left = x + "px";
			getObj('rect').style.top = y + "px";
		}
		
		function getObj(elementID){
			return document.getElementById(elementID);
		}
		</script>
		
		<style type="text/css">
			#box { border: solid; border-width: 1; background: navy; height: 300px; width: 400px; z-index: 1; }
			#rect { border: solid; border-width: 1; background: yellow; height: 20px; width: 20px; z-index: 2; }
		</style>
	</head>
	<body onLoad="init();">
	
	<div id="box">
	<div id="rect"></div>
	</div>
	
	</body>
</html>

Asus F3JP-Z53 Notebook:
Intel Core 2 Duo T7200 @ 2 Ghz
Mobile Radeon X1700 256 MB
2048 MB DDR2-Ram
160 GB Hitachi HDD
Ubuntu 9.04 / Windows XP SP 3
0

#8 Mitglied ist offline   Graumagier 

  • Gruppe: aktive Mitglieder
  • Beiträge: 8.811
  • Beigetreten: 01. März 04
  • Reputation: 1
  • Geschlecht:Männlich
  • Wohnort:Graz, Österreich

geschrieben 01. März 2007 - 12:07

Könnte daran liegen dass die DIVs zu dem Zeitpunkt, an dem du das Skript aufrufst, noch nicht geparst ist --> Ergo kein DOM-Baum besteht, auf den das Skript zurückgreifen könnte (bzw. dieser die DIVs noch nicht beinhaltet). Versuch' mal das Skript unter die DIVs zu schreiben bzw. danach aufzurufen.
"If you make something idiot proof, someone will invent a better idiot." - Marvin

For Emails always use OpenPGP. My KeyID: 0xA1E011A4
0

#9 Mitglied ist offline   Iso 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 14. Mai 03
  • Reputation: 0
  • Wohnort:Hörstel
  • Interessen:Computer<br />Parties<br />Mädels...

geschrieben 01. März 2007 - 12:13

Ok, wird wohl der Fall gewesen sein,

hab nun einen Link unter den DIVs eingebaut, welcher die init-Function aufruft, sodass diese nicht mehr bei onLoad() geladen wird und die Initialisierung der Variablen geschieht nun auch erst in der Init-Function.
Siehe da: Kein Fehler mehr in der Fehlerkonsole, jedoch geschieht leider nichts, sobald ich auf den Link klicke ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
	<head>
		<title>opdracht 2a</title>
		<script type="text/javascript">
		var x = 0;
		var y = 0;
		var height = 0;
		var width = 0;
		var xTempo = 5;
		var yTempo = 5;
		
		function init(){
			height = getObj("box").style.height;
			width = getObj('box').style.width;
			startAnimation();
		}
		
		function startAnimation(){
			setInterval("animate()",10);
		}
		
		function animate(){
			if(x>=width){
				xTempo = -5;
			}
			if(x<=0){
				xTempo = 5;
			}
			if(y>=height){
				yTempo = -5;
			}
			if(y<=0){
				yTempo = 5;
			}
			x += xTempo;
			y += yTempo;
			shiftTo()
		}
		
		function shiftTo(){
			getObj('rect').style.left = x + "px";
			getObj('rect').style.top = y + "px";
		}
		
		function getObj(elementID){
			return document.getElementById(elementID);
		}
		</script>
		
		<style type="text/css">
			#box { background: navy; height: 300px; width: 400px; z-index: 1; }
			#rect { background: yellow; height: 20px; width: 20px; z-index: 2; }
		</style>
	</head>
	<body>
	
	<div id="box">
	<div id="rect"></div>
	</div>
	
	<a href="java script:init();">Start</a>
	</body>
</html>

Asus F3JP-Z53 Notebook:
Intel Core 2 Duo T7200 @ 2 Ghz
Mobile Radeon X1700 256 MB
2048 MB DDR2-Ram
160 GB Hitachi HDD
Ubuntu 9.04 / Windows XP SP 3
0

#10 Mitglied ist offline   Graumagier 

  • Gruppe: aktive Mitglieder
  • Beiträge: 8.811
  • Beigetreten: 01. März 04
  • Reputation: 1
  • Geschlecht:Männlich
  • Wohnort:Graz, Österreich

geschrieben 01. März 2007 - 12:18

Zunächst mal: <a href="java script:init()">Start</a> nix gut. java script:init() schon eher ;)

EDIT: Du mögest mir mein wirres Posting verzeihen, ich editiere einfach wenn mit was auffällt ;)

EDIT 2: Beim ersten Aufruf von shiftTo() in Zeile 38 fehlt ein Semikolon.

Dieser Beitrag wurde von Graumagier bearbeitet: 01. März 2007 - 12:26

"If you make something idiot proof, someone will invent a better idiot." - Marvin

For Emails always use OpenPGP. My KeyID: 0xA1E011A4
0

#11 Mitglied ist offline   Iso 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 14. Mai 03
  • Reputation: 0
  • Wohnort:Hörstel
  • Interessen:Computer<br />Parties<br />Mädels...

geschrieben 01. März 2007 - 12:20

Hmm ,ist wohl ein Kopierfehler, bei mir im Editor ist es zusammengeschrieben, liegt also nicht daran ;)

EDIT1:
Jo, hab ich auch schon gemerkt, ist behoben, tut sich aber immer noch nichts.

Dieser Beitrag wurde von Iso bearbeitet: 01. März 2007 - 12:31

Asus F3JP-Z53 Notebook:
Intel Core 2 Duo T7200 @ 2 Ghz
Mobile Radeon X1700 256 MB
2048 MB DDR2-Ram
160 GB Hitachi HDD
Ubuntu 9.04 / Windows XP SP 3
0

#12 Mitglied ist offline   Graumagier 

  • Gruppe: aktive Mitglieder
  • Beiträge: 8.811
  • Beigetreten: 01. März 04
  • Reputation: 1
  • Geschlecht:Männlich
  • Wohnort:Graz, Österreich

geschrieben 01. März 2007 - 12:43

So, jetzt wird's spannend:

Wichtig ist zunächst einmal, dass das innere Rechteck das Attribut "position: relative" erhält, dann flackert es zumindest schon mal wild vor sich hin.

EDIT: So, jetzt aber. Du musst Höhe und Breite mit offsetHeight bzw. offsetWidth abfragen, dann funktioniert es.

Dieser Beitrag wurde von Graumagier bearbeitet: 01. März 2007 - 12:59

"If you make something idiot proof, someone will invent a better idiot." - Marvin

For Emails always use OpenPGP. My KeyID: 0xA1E011A4
0

#13 Mitglied ist offline   Iso 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 14. Mai 03
  • Reputation: 0
  • Wohnort:Hörstel
  • Interessen:Computer<br />Parties<br />Mädels...

geschrieben 01. März 2007 - 13:06

Juhu, danke für die Hilfe,
ja jetzt bewegt sich wenigstens schonmal was, muss nur noch schaun, wie ich das hinbekomme, dass das kleine Rechteck auch im großen Rechteck bleibt,
das funktioniert nämlich noch nicht.

Aber ansonsten BIG THX
Asus F3JP-Z53 Notebook:
Intel Core 2 Duo T7200 @ 2 Ghz
Mobile Radeon X1700 256 MB
2048 MB DDR2-Ram
160 GB Hitachi HDD
Ubuntu 9.04 / Windows XP SP 3
0

#14 Mitglied ist offline   Graumagier 

  • Gruppe: aktive Mitglieder
  • Beiträge: 8.811
  • Beigetreten: 01. März 04
  • Reputation: 1
  • Geschlecht:Männlich
  • Wohnort:Graz, Österreich

geschrieben 01. März 2007 - 13:08

Das liegt daran dass du mit Fünferschritten arbeitest. Schraub' das Intervall mal auf einen Pixel herunter.

Dieser Beitrag wurde von Graumagier bearbeitet: 01. März 2007 - 13:12

"If you make something idiot proof, someone will invent a better idiot." - Marvin

For Emails always use OpenPGP. My KeyID: 0xA1E011A4
0

#15 Mitglied ist offline   Iso 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 14. Mai 03
  • Reputation: 0
  • Wohnort:Hörstel
  • Interessen:Computer<br />Parties<br />Mädels...

geschrieben 01. März 2007 - 13:13

Ne daran liegts irgendwie nicht.
Das mit den offset klappt irgendwie nicht, wenn ich nämlich manuell die Höhe und Breite der box eintrage, funktioniert alles, beim offset fliegt das kleine Rechteck einfach unendlich weit nach unten rechts ...

Ich denke, dass es daran liegt, dass "getObj('box').style.height" nicht 300 sondern "300 px" returned und dann ja x ( z.B. 100 ) mit "300 px" verglichen wird, was aber natürlich nicht funktioniert, hmm, mal ebend n paar min nachdenken.

Dieser Beitrag wurde von Iso bearbeitet: 01. März 2007 - 13:24

Asus F3JP-Z53 Notebook:
Intel Core 2 Duo T7200 @ 2 Ghz
Mobile Radeon X1700 256 MB
2048 MB DDR2-Ram
160 GB Hitachi HDD
Ubuntu 9.04 / Windows XP SP 3
0

Thema verteilen:


  • 3 Seiten +
  • 1
  • 2
  • 3

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0