• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Position einer bestimmten ID

D

D4rkf0rce

New member
Hallo zusammen.
Ich bin JS Neuling und hätte eine Frage zu einem Code.
Ich erstelle zur Zeit eine Art Mahjongg für meine Homepage.
Eine Karte bewegt sich per Click mit folgenden Code:



Code: 
<html>

<head>

	
</head>

<body bgcolor="black">

<div id = "Figur1" style="position:absolute; top:811px; left: 0px;"   onclick="button1()">
		<img src="Texturen/FG1.png" WIDTH="71" HEIGHT="71">
	    </div>

<div id = "Karte1" style="display:none; position:absolute; top:400px; left: 70px;" onclick="button2()">
		<img src="Texturen/KT1A.png" WIDTH="260" HEIGHT="400">
	    </div>
	
<script type="text/javascript">	
	
function button1()

{
 document.getElementById("Karte1").style.display="block"
}
	
</script>

</body>

</html>

Nun möchte ich allerdings, dass sich die Karte nur bewegt, wenn sich die ID Figur auf der Position left = 0 befindet.
Das ganze sollte per If Abfrage geschehen. Wie müsste der Code dafür lauten?
Liebe Grüße
 
Zuletzt bearbeitet:
Hi,

etwa so könnte das aussehen:
Code: 
...
if (document.getElementById("Karte1").style.left == 0) {
  document.getElementById("Karte1").style.display="block";
}
...
 
Könnte es nicht, da .style.left immer eine Einheit zurückliefert. Aber .offsetLeft sollte funktionieren.

Generell sehe ich aber hier nichts, was sich bewegt - die Karte wird einfach nur angezeigt...

Auch ist es nie eine gute Idee den Zustand eines Spiels im Layout zu speichern und von dort wieder abzufragen. Das solltest du auf jeden Fall irgendwo im JS speichern und dann die Darstellung anhand dessen Zustand dann aktualisieren.

PS: Dein HTML ist invalide.
PPS: HTML-Attribute, die nur zu Layoutzwecken da sind, sollte man nicht verwenden. Dafür gibt es CSS. (Außer natürlich style).
PPPS: Entscheide dich für eine Schreibweise für dein HTML. Entweder alle Attribute groß oder alle Attribute klein.
PPPPS: Funktionen durchzunummerieren ist der Anfang von komplett unwartbarem Code. Um Funktionalität mit kleinen, flexiblen Unterschieden bereizustellen wurden Parameter erfunden.
 
Huhu.
Und schon mal danke für die Antworten :)

Generell sehe ich aber hier nichts, was sich bewegt - die Karte wird einfach nur angezeigt...
Zum Vergrößern anklicken....

Ja, um das Ganze überschaulicher zu machen, hab ich nur ne Zusammenfassung von dem Code geschrieben.
Wollte niemanden verwirren und hab jetzt nochmal das komplette Script gepostet.

Auch ist es nie eine gute Idee den Zustand eines Spiels im Layout zu speichern und von dort wieder abzufragen. Das solltest du auf jeden Fall irgendwo im JS speichern und dann die Darstellung anhand dessen Zustand dann aktualisieren.
Zum Vergrößern anklicken....

Auch das ist im kompletten Script vorhanden.

Hier die html Datei:

Code: 
<html>

<head>

</head>

<body bgcolor="black">


<div id = "Figur1" style="position:absolute; top:640px; left: 0px;"   onclick="button1()">
		<img src="Texturen/FG1.png" WIDTH="71" HEIGHT="71">
	    </div>

<div id = "Karte1" style="display:none; position:absolute; top:200px; left: 70px;" onclick="button2()">
		<img src="Texturen/KT1A.png" WIDTH="260" HEIGHT="400">
	    </div>
		
<div id = "B-BW" style="position:absolute; top:520px; left: 380px;" >

<img src="Texturen/B-BW1.png" onmouseover="this.src='Texturen/B-BW2.png'" onmouseout="this.src='Texturen/B-BW1.png'" onclick="buttonBW()"  >

</div>		
	
<script type="text/javascript" src='move.js'></script>	
	

</body>

</html>

Und hier nochmal die move.js:

Code: 
function button1()

{
document.getElementById("Karte1").style.display="block";
}

function button2()

{
document.getElementById("Karte1").style.top="100px";
document.getElementById("Karte1").style.left="70px";
}

Durch das Anklicken der Figur wird Karte automatisch bewegt.
Nun wollte ich, dass die Karte sich nur bewegt, wenn die ID "Figur" sich auf left = 0 befindet.

Habe nun beide Codes verwendet. Leider ohne erfolg.

Code: 
if (document.getElementById("Figur1").style.left == 0) {
  document.getElementById("Karte1").style.top="100px";
  document.getElementById("Karte1").style.left="70px";
}


Code: 
if (document.getElementById("Figur1").offsetLeft== 0) {
  document.getElementById("Karte1").style.top="100px";
  document.getElementById("Karte1").style.left="70px";
}

Liebe Grüße
 
Zuletzt bearbeitet:
Da wird immer noch nichts bewegt... und eine Spiellogik in JS sehe ich auch nicht...

Und da du #Figur1 nirgemds bewegst, ist .offsetLeft auch immer 0...

Entweder fehlt da eine große Menge Code oder du hast den Fall, dass #Figur1 sich irgendwohin bewegt noch nicht implementiert.
 
Huhu und danke für die Antworten.

Habe den Fehler nun gefunden.

offsetLeft war richtig.

Leider hatte ich einen Flüchtigkeitsfehler eingebaut.

So hab ich den Code geschrieben:

Code: 
function move()

if (document.getElementById("Figur1").offsetLeft == "0")
{
  document.getElementById("Karte1").style.top="100px";
  document.getElementById("Karte1").style.left="70px";
}

und so sollte der Code lauten:

Code: 
function move()

{
if (document.getElementById("Figur1").offsetLeft == "0")
{
  document.getElementById("Karte1").style.top="100px";
  document.getElementById("Karte1").style.left="70px";
}
}


Sprich, ich hab zwei spitze Klammern vergessen.

Aber nochmal vielen Dank für die Information mit offsetLeft.

Liebe Grüße
 
Bitte - gern geschehen.

Solche Sachen sieht man extrem schnell über die Fehlerkonsole.

PS: .offsetLeft liefert immer eine Zahl, deswegen solltest du den Vergleich mit === 0 machen.
PPS: gewöhne dir gleich am Anfang einen einheitlichen Codestil mit gescheiter Eiinrückung an. Macht den Code viel lesbarer und wartbarer.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben