zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Content-Wechsel bei Click

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.03.2014, 22:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2013
Ort: Heidelberg
Beiträge: 19
SansArt befindet sich auf einem aufstrebenden Ast
Standard Content-Wechsel bei Click

Hallo,

ich bin noch ein relativ blutiger Anfänger was JavaScript angeht Deshalb bin ich gerade einfach nicht in der Lage zu erkennen was hier schief läuft.

Folgendes ist mein Problem: Ich möchte auf meiner Seite eine Box haben, in der sich ein LogIn Formular befindet. Soweit so gut. Beim Klick auf einen Button/Text soll nun aber dieses Formular verschwinden und stattdessen das Registrierungsformular erscheinen. Daaaas funktioniert noch nicht so ganz

Zum "swappen" habe ich diese Funktion im Headbereich der Seite geschrieben:

Code:
<script type="text/javascript">
var current_swap = "login";
function swap() {
	if(current_swap == "login") {
		_("headline").innerHTML = "Register";
		_("swap_text").innerHTML = "Or Login Now";
		_("loginform").innerHTML = "<?php include("register.php")?>";
		var current_swap = "register";
	} else {
		_("headline").innerHTML = "Log In";
		_("swap_text").innerHTML = "Or Register Now";
		_("loginform").innerHTML = "<?php include("login.php")?>";
		var current_swap = "login";
	}
}
</script>
die _ Funktion referriert hierauf:

Code:
function _(x){
	return document.getElementById(x);
}
Die "Magie" sollte hier passieren:

HTML-Code:
        <a id="swap_text" onclick="swap();">Or Register Now</a>
        <div id="input_fields">
			<?php include("login.php") ?>
        </div>
Ich vermute dass es etwas ... ungeschickt ist dass per Link mit onClick zu lösen, ich konnte bisher aber keine bessere, funktionierende Methode finden. Und egal wie ungeschickt das ist, es sollte doch wenigstens funktionieren

Freue mich auf Hilfe,
Sans
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.03.2014, 22:54
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Wenn Javascript für dich zu schwierig ist, dann mache doch 2 Seiten, eine für Login und eine fürs Registrieren.

Gerade Logins und Registraturen sollen doch neue Leute veranlassen sich anzumelden, mache es ihnen nicht so schwer, denn wer Javascript aus hat kann das sonst nicht nutzen. Das ist somit niemals Barrierefrei.

Javascript sollte ein zusätzliches Feature sein. Siehe auch Progressive Verbesserung
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.03.2014, 23:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2013
Ort: Heidelberg
Beiträge: 19
SansArt befindet sich auf einem aufstrebenden Ast
Standard

Äh, ich wills ja lernen^^ "zu schwer" gibts nicht Und meinen Usern schwerer mache ichs dadurch wirklich nicht. Ist ja nichts anderes als nen Link, nur dass die Seite bleibt. Bin auch nicht so der Fan von Aufgeben und die leichtere Version nehmen nur weils nicht gleich klappt
Mit Zitat antworten
  #4 (permalink)  
Alt 16.03.2014, 23:07
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Du hast es nicht verstanden, was ich dir schrieb.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 16.03.2014, 23:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2013
Ort: Heidelberg
Beiträge: 19
SansArt befindet sich auf einem aufstrebenden Ast
Standard

Ich denke doch. Du mutmaßt 1. dass ich zu dumm für JavaScript bin, was ich vehement dementiere und meinst 2. dass man zugute der progressiven Programmierung auf Javascript verzichten sollte. Das halte ich aber nicht für keine Option.

Ich weiß schon was ich tun will. Ich brauche Hilfe bei meinem Problem, keine gutgemeinten, aber nutzlosen Ratschläge wie ich meine Projekte konzipiere Ist nicht böse gemeint, ist nur nicht das wonach ich suche.

Hoffe jemand anderes kann mir helfen?

Gruß
Sans
Mit Zitat antworten
  #6 (permalink)  
Alt 17.03.2014, 00:27
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Wenn ich deine Schnipsel, exakt so versuche zu testen bekomme ich:
Code:
ReferenceError: swap is not defined
Was ja daran liegt, das du wunderbar PHP Funktionen reinballerst und keine Sau weiß was da drin steht.
Nimmt man den Kram raus, kommt:

Code:
Uncaught TypeError: Cannot set property 'innerHTML' of null
Weil ja die Elemente nicht vorhanden sind.

Lad es irgendwo hoch oder gib uns den kompletten Code.

Und achja, die Lösung ist recht simpel.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #7 (permalink)  
Alt 17.03.2014, 01:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2013
Ort: Heidelberg
Beiträge: 19
SansArt befindet sich auf einem aufstrebenden Ast
Standard

Äh, ja wollte nicht allen Code reinhauen weil das so ... viel ist.

Bin mittlerweile soweit gekommen dass ich weiß dass ich ersteinmal die falsche ID aufgerufen hatte. Das zu ändern bringt mich zwar einen Schritt näher aber nicht wirklich weiter.

Hier meine aktuelle Testumgebung:
Nope, Link entfernt

Ich habe das gerade als Button gemacht in der Hoffnung das bringt was, nicht wundern

Danke aber schonmal für die produktive Hilfe

Gruß

EDIT: Habe auchnoch die die php includes die ich per innerHTML ändern wollte herausgenommen um das Problem auf das OnClick-Event herunterzubrechen. Eins nach dem anderen^^

Geändert von SansArt (17.03.2014 um 17:40 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 17.03.2014, 01:27
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

HTML-Code:
onfucus='emptyElement('status')'
Meinst du vielleicht onFocus ?

EDIT:
Und weitere Fehler unter http://validator.w3.org/unicorn/chec...sk=conformance
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

Geändert von explanator (17.03.2014 um 01:30 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 17.03.2014, 01:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.02.2013
Ort: Heidelberg
Beiträge: 19
SansArt befindet sich auf einem aufstrebenden Ast
Standard

Ups Hat nur leider nichts mit dem Problemherd zutun^^
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.03.2014, 03:25
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von SansArt Beitrag anzeigen
Ups Hat nur leider nichts mit dem Problemherd zutun^^
Dein Problemherd ist auch nicht, das sich die Felder nicht zurück ändern. (Das ist damit gelöst, wenn du beim nachträglichen Ändern von current_swap das "var" davor wegnimmst.)

Des Weiteren (und das darfst du gerne böse auffassen oder sonst was, das ist mir egal) solltest du den gesamten Müll den du da hast mal wegschmeißen. Dein MarkUp leidet an extremer Vermüllung.

https://gist.github.com/Thielo/069404deccc0c94c50c1
So könntest du dein HTML schonmal aufräumen. Verringerte Größe, gleiche Funktionalität, leichter zu lesen.

Zu deinem JS gibts folgendes zu sagen: warum bindest du jQuery ein, wenn du es nicht benutzt und mir "Vanilla JS" arbeitest?

Event-Handler
Code:
el.addEventListener(eventName, eventHandler);
Einen Fade-In-Effekt / Fade-Out-Effekt, kann man auch einiges einfacher darstellen
Hier für FadeIn
Code:
// JS
el.classList.add('show');
el.classList.remove('hide');

// CSS
.show {
  transition: opacity 400ms;
}
.hide {
  opacity: 0;
}
Generell ist gegen die Nutzung von jQuery nichts einzusetzen. Eigentlich ist es sogar hilfreich (meine Meinung)
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Validator verbietet Attribut bei Link - Hilfe! ;) bastkrug (X)HTML 7 20.02.2014 13:28
Tabellen als Div Container SpecialFighter (X)HTML 7 12.10.2010 18:40
Ungewöhnlicher abstand beim clearen von floats adrianno CSS 14 16.09.2009 15:20
DIV Länge automatisch anpassen judicious CSS 10 08.05.2006 17:30
Seitenaufbau mit DIVs und 100% Höhe vespasquire CSS 6 12.09.2004 16:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:32 Uhr.