• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

SOS! Element soll pro Klick sich verschieben (JavaScript)

Status
Für weitere Antworten geschlossen.
C

Cobretty

Neues Mitglied
Hallo zusammen,

wir haben erst kürzlich in der "Schule" mit JavaScript angefanen und somit ist diese Materie noch recht frisch für mich.

Zu meinem Problem:

Ich möchte, wenn ich auf ein Element klicke, dass es sich ein Stück weiter nach rechts bewegt. Sprich, steht auf 100px von links und soll dann um weitere 50px nach rechts bei Klick auf dieses Element wandern. Das habe ich auch geschafft (siehe Quellcode). Ich möchte es allerdings erreichen, dass jedesmal wenn ich auf das Element klicke es um weitere 50px nach rechts wandert. Also beim 2. Mal klicken befindet es sich bei 200px von links u.s.w.

Ist das möglich? :)

Für eine Antwort wäre ich mehr als dankbar!

Beste Grüße

Cathrin


Quellcode:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace" xml:lang="de" lang="de">
<head>
<title>Pferderennen</title>
<meta name="generator" content="Scribe! 2 [http://scribe.de]" />
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript">
<!--
function go()
{document.getElementById("gruppe1").style.left="150px"; }

//-->
</script>
</head>
<body>
<div id="container"></div>
<input class="anklickButton" type="button" value="GRUPPE EINS" onclick="go()" id="gruppe1"></div>
<div id="gruppe2">Gruppe ZWEI</div>
<div id="gruppe3">Gruppe DREI</div>
<div id="gruppe4">Gruppe VIER</div>
<div id="gruppe5">Gruppe F&Uuml;NF</div>
<div id="gruppe6">Gruppe SECHS</div>
</body>
</html>
 
Werbung:
Dein Code ist schonmal ein guter Anfang. Aber:

Problem 1: Da Du die Funktion go() in einen Button eingefügt hast musst Du auch abschalten, dass beim Klick darauf irgendwas passiert.

Code: 
onclick="return false;go();"
Problem 2: Hier ist ein Leerzeichen zuviel:
Code: 
document.getElementById("gruppe1").style.left="150px";
Wenn Du das Element jedes Mal 100 Pixel weiter setzen willst musst Du die Position addieren:

Code: 
posleft = document.getElementById("gruppe1").style.left + 100;
document.getElementById("gruppe1").style.left = posleft + "px";

Und nicht vergessen das betreffende Element auch absolut oder relativ zu positionieren, da nur dann auch die CSS-Eigenschaft "left" wirkt.
 
Huhu threadi,

vielen lieben Dank für deine super schnelle Antwort! :)

Habe das jetzt alles denke ich mal so gemacht wie du gesagt hast,... aber irgendwie geht da nix. Hab ich da noch irgendwo n Fehler drin?

Hier kannst es dir auch anschauen: Pferderennen

_________________________________________
<head>
<title>Pferderennen</title>
<meta name="generator" content="Scribe! 2 [http://scribe.de]" />
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript">
<!--
function go()
{
posleft = document.getElementById("gruppe1").style.left + 100;
document.getElementById("gruppe1").style.left = posleft + "px";
}
//-->
</script>
</head>
<body>
<div id="container"></div>
<input class="anklickButton" type="button" value="GRUPPE EINS" onclick="return false;go();" id="gruppe1"></div>
<div id="gruppe2">Gruppe ZWEI</div>
<div id="gruppe3">Gruppe DREI</div>
<div id="gruppe4">Gruppe VIER</div>
<div id="gruppe5">Gruppe F&Uuml;NF</div>
<div id="gruppe6">Gruppe SECHS</div>
</body>
__________________________________________


CSS:

#gruppe1{
position: absolute;
z-index: 1;
top: 100px;
left: 100px;
height:50px;
width: 150px;
background-color: White;
text-algin: center;
font-family: Trebuchet MS;
}
 
Werbung:
Die Position ist am Anfang gar nicht bekannt und nicht im Style-Objekt gesetzt, deshalb kann man nichts addieren.

Um die Position raus zubekommen braucht es also getComputedStyle() und das entsprechende Äquivalent für den IE.

Edit:
style.left gibt außerdem einen String zurück. Deshalb funktioniert der Operator + hier zur Stringverkettung.
 
Hast recht. Man müsste um das Auslesen der Größe noch parseInt() rummlegen. Und in dem Code oben von mir ist auch noch ein Fehler: return false; muss natürlich nach dem Aufruf der Funktion go() geschehen.
 
crash schrieb:
Die Position ist am Anfang gar nicht bekannt und nicht im Style-Objekt gesetzt, deshalb kann man nichts addieren.

Um die Position raus zubekommen braucht es also getComputedStyle() und das entsprechende Äquivalent für den IE.

Edit:
style.left gibt außerdem einen String zurück. Deshalb funktioniert der Operator + hier zur Stringverkettung.
Zum Vergrößern anklicken....


Hmmm.... super vielen dank erstmal für die antwort. Allerdings versteh ich nur Bahnhof. :)

Bin sozusogan echt noch n Anfänger in JavaScript und mir sagt "getComputedStyle() bzw. String oder gar Stringverkettung noch nichts. :(

Vielleicht nochmal für newbies :?::oops:
 
Werbung:
Dem Style-Objekt sind aus Performence-Gründen anfangs noch keinerlei Werte zugewiesen. Erst wenn man eine Eigenschaft setzt kann man diese auch auslesen.

DOM definiert deshalb getComputedStyle(), welches den momentanen Stil eines Objekts zurückgibt, was nicht unbedingt das ist, was in deinem CSS steht. Darum "computed" wie berechnet.

https://developer.mozilla.org/En/DOM/Window.getComputedStyle
 
Hmm... hat wirklich keiner ne Ahnung wie der Quellcode aussehen müsste, dass es funktioniert das dass element bei jedem weiteren Click weite nach rechts springt? :(
 
Werbung:
Nun, an der Anwendung. Sprich bei dem Quellcode den ich hier eingefügt habe. Wie wende ich es genau an? Also wo füge ich was ein!?

z. B. getComputedStyle() ... wie und wo setz ich das ein?

Was ich halt an meinen Quellcode ändern müsste damit es funkt.
Das ist primär das Problem.
 
MoesTaverne.com - NoPaste

Code: 
var startLeft = getStyle(deinObjekt, "left");
dann hast du erstmal "100px". Das wandelst du um, entweder mit substr() und dem Unary-Operator + oder mittels parseInt(), was du in einer Variable speicherst. Dann einfach beim Click-Event um 50 erhöhen.
 
Werbung:
Wollte mich nochmal melden und bekannt geben, dass ich es hinbekommen habe. :D

Habs dann schlussendlich so gelöst:

___________________________________________________
<script type="text/javascript">
<!--
var pferd1=100;
function go()
{
if(pferd1 < 1060)
pferd1=pferd1+80;
document.getElementById("gruppe1").style.left=pferd1+"px";
}
___________________________________________________


Pferderennen

Vielen Dank nochmal für eure Hilfe!

Beste Grüße

Cathrin :)
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben