JavaScript Tutorial für Anfänger #25 - DOM 4 - Animationen

In diesem Tutorial zeige ich euch, wie wir kleine Animationen mit reinem JavaScript realisieren können.

* *Meine Website mit allen anderen Kanälen und Newsletter* *:

_Discord:_

_Unterstützt mich - Danke!:_

[christians.]

Danke für die super Eklärungen in den Tutorials.



Es ist bestimmt eine einfache Antwort auf meine Frage, aber ich stelle sie trotzdem mal:
Wie schaffe ich es, das die Animation wieder zurück nach links läuft, wenn diese am rechten Rand angekommen ist? Muss man dann einfach die Funktion umschreiben oder eine weitere schreiben? Fange gerade an JavaScript zu lernen und das stellt mich leider vor ein kleines Problemchen ;-)


Danke

[adridoesthings]

Hättest statt 500 als constante auch window.width/2-(x.width/2) nehmen können :D

[DiesundDasTutorial]

Ich glaube man kann auch mit .sytle['margin-left'] darauf zugreifen. Damit hat man dann nicht immer das problem mit den Bindestrichen.

[theeternalwanderer]

Servus,
cooles Video. Ich habe das Problem, immer wenn iich den Code ausführe, dass die Bewegung am linken Rand der Webseite startet. hast du ne Idee wie ich das fixen kann oder wo der Fehler ist? Hier mal der code: function myMove() {
var x =
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos >= 500) {
clearInterval(id);
} else {
pos++;
x.style.marginLeft = pos + 'px';
x.style.marginTop = pos + 'px';
}
}

[Tenarius]

Danke für deine Tutorials! Eine Frage: In .sqf ist es möglich eine If-Condition per "exitWith" direkt zu beenden, so dass kein weiterer Code ausgeführt wird. -- if ( condition ) exitWith { function }; -- Gibt es in JavaScript ähnliches oder nutzt man dort ausschließlich workarounds wie else if?

[undercoverpilz]

nice ich habs sogar noch erweitert nur kommt beim window.alert(add) beim ersten mal ein leerer string raus

function switchText() {
var x =
var add =
window.alert(add)
if (add == 0){
var id = setInterval(function (){
if (add >= 501) {
clearInterval(id);

}
else {
x.style.marginLeft = add + "px";
++add;
}

}, 5)}
else {
var id = setInterval(function (){
if (add == -1) {
clearInterval(id);
}
else {
x.style.marginLeft = add + "px";
--add;
}

}, 5)
}
}

[lucatatas]

Hey, ich habe eine Frage:
Habe folgenden Code
<form>
<input type="number" autocomlete="off" name="zahl" autofocus="true" id="zahl1"><br/>
<input type="number" autocomlete="off" name="zahl" id="zahl2"><br/>
<input type="button" value="Rechnen!" onclick="myFunction()">
<script>
function myFunction() {
var ergebnis;
var zahl1 =
var zahl2 =
ergebnis = zahl1 + zahl2;
window.alert(ergebnis);
}
Wenn ich jetzt 5 un 4 nehme zum Beispiel, dann kommt als Antwort "54", Hilfe? :D

[jobcentertycoon]

Naja ich mache das lieber über CSS animationen wo ich dann einfach beim Element die Klasse hinzufüge weil wenn ich das mit Javascript komplett mache wie im Video läuft das nur in Chrome flüssig bei Firefox laggt das total

[danieldaschle]

Wenn du Webdevelopment dann weitermachen willst hab ich als Idee: Ruby on Rails oder django Pythona ls Alternative zu PHP. Und vielleicht Bootstrap, aber da bitte auch zeigen wie man dinge selber anpassen kann. Bootsrap ist ja einfach zu bedienen, aber z.B. elemente wie die navbar manuell verändern ist dann etwas schwerer :D (oder eine sidebar anlegen (hat bootstrap standartmäßig nicht). finde solche themen interessant, wenn man tiefer in die materie geht. mit html usw. erstellt man ja heutzutage keine rohen seiten mehr....

[Knightfire]

das ist nicht so gut... machts lieber direkt mit css... z.B. onhover oder onlick dann die ganzen css codes dafür, die animationen werden viel "natürlicher"

[lucatatas]

Hallo, ich habe eine Frage:
habe folgenden Code:
<form>
<input type="text" autocomlete="off" name="zahl" autofocus="true" id="zahl1"><br/>
<input type="number" autocomlete="off" name="zahl" id="zahl2"><br/>
<input type="button" value="Rechnen!" onclick="myFunction()">


<script>
function myFunction() {
var ergebnis;
var zahl1 =
var zahl2 =
ergebnis = zahl1 + zahl2;
window.alert(ergebnis);
}
Wenn ich jetzt zum Beispiel "4" und "5" nehme, dann fügt das Script nur die beiden Strings zusammen und gibt "45" aus.
Wie umgehe ich dieses Problem?

[christianschmidt]

ich hab eine frage:
ich hab ne 3*2 Tabelle aus block-Elementen und will eine dieser Schaltflächen auf die größe der ganzen tabelle vergrößern. wie mach ich das, das ich allgemein schreiben kann und mit getElementsByClass zugreifen kann, auch wenn ich nur eins vergrößern will. außerdem stört dann auch das block-display, weil sich dann alles verschiebt. wär nett wenn du antwortest

[flotterotto]

Ach, ist gelogen.... habe nachgeschaut...