Anzeige nach klick

calvin · 3. Februar 2011

Hallo,

ich mach es heute ganz kurz

Ist es möglich einen Link in seine Seite einzubauen der bei einem click einen verbrogenen Satz anzeigt (z.B: anzeige eines vokabels in einem satz zur hilfestellung bei einem Vokabel-Test)

Der Satz wird beim ersten Aufruf der Seite mitgeladen, also ist AJAX hier nicht gefragt, hoffe ich Das ist sicher kein Problem, ich habe es bis jetzt so gemacht:

Code

<a href="#">Satz anzeigen </a>
----------
var inhalt = document.getElementsByTagName('a')[0].onclick(document.write('bla'));

Das gibt mir aber Bla am ende des Dokuments aus und der klick bringt gar nichts.

Ich hab leider von JS sehr wenig Ahnung, gerade mal so viel wie hier auf der Seite im Tut steht.

Danke Leute

Sarkkan · 3. Februar 2011

onclick (und alle anderen Eventhändler) ist keine Funktion, sondern eine Eigenschaft wie class, title, style,..
Bedeutet, dass du diesem eine Funktion zuweisen musst

Code

document.getElementsByTagName('a')[0].onclick = document.write('bla');

(write löscht übrigens quasi alles andere^^ besser wäre vielleicht .innerHTML )

calvin · 3. Februar 2011

Hmm

also mein Code sieht jetzt so aus:

Code

<a href="#">Zum anzeigen hier klicken</a>




<script type="text/javascript">
document.getElementsByTagName('a')[0].onclick = document.write('Der Satz wird nun angezeigt');
</script>

Es ändert sich so aber wenig. Der Satz wird immer angezeigt, der Klick macht nichts.

Könntest du dir das vielleicht nochmals ansehen, wäre nett

Danke

Sarkkan · 3. Februar 2011

Hab es mir noch mal angesehen und erst ziemlich gerätselt.. hab dann mal in der Entwicklerkonsole des FF4 nachgesehen, was da los ist
Erhielt folgende Fehlermeldung: document.getElementsByTagName("a")[0] is undefined @ <a class="postlink" href="http://localhost/jsOnclick.html#:12">http://localhost/jsOnclick.html#:12</a>
Hab dann ein wenig hin und her überlegt.. und einige Test mit dem <a>-Element angestellt, von der Konsole aus Und da viel es mir dann ein^^
Wenn der Code da steht, wird er beim Laden ausgeführt. Hierbei sieht das Problem so aus, dass sich die Document-Struktur noch nicht aufgebaut hat, also der Browser nicht weiß wo den bitte das <a>-Element sein soll.

Mit folgendem Code klappt es:

Code

window.onload = function() {
    document.getElementsByTagName('a')[0].onclick = function(){
        document.write('Der Satz wird nun angezeigt');
    }
}

Hierbei benutzten wir das onload-Event^^
Dann siehst du wenigstens für einige Millisekunden, dass sich was ändert^^
Mit folgendem Code verbleibt der Text dann auch nach dem anklicken:

Code

window.onload = function() {
    document.getElementsByTagName('a')[0].onclick = function(){
        document.getElementsByTagName('body')[0].innerHTML = 'Der Satz wird nun angezeigt';
    }
}

(Und wenn du vor der = des innerHTML's noch ein + stellst, bleibt sogar der Link Das kommt daher, weil dann der <body> um einigen Text erweitert wird )

Hoffe konnte dir helfen und du findest es nicht zu störend, dass ich ein wenig ausschweife
Wenn doch, dann sag mir bitte Bescheid, dann werde ich mich beim nächsten mal kürzer fassen (= Aber finde es persönlich besser wenn man weiß, wieso der Browser wie reagiert (=

calvin · 3. Februar 2011

Achso

Danke für die Hilfe und die ausführliche Erklärung.

Den echten Satz kann ich ja dann bestimmt mit

PHP

document.getElementsByTagName('a')[0].innerHTML = '<?php $satz ?>';

einfügen...

Eine kleine Frage am Rande, wo habt ihr denn JS und AJAX gelernt?

Zu HTML sind ja unendliche viel Tuts im Internet und ein gutes Buch hilft da zum verfestigen auch bei CSS ist es ähnlich und bei PHP hat mir unser Herr Axel sehr geholfen allerdings bei JS kommt man im Internet selber nicht sehr weit kann das sein?
Also bleibt hier wohl nur noch die Alternative Buch, oder? -.-

Danke nochmals

Sarkkan · 3. Februar 2011

Ganz genau so könnte man es machen
Oder eben per Ajax den Satz sogar noch laden lassen

Also ich habe JavaScript und Ajax durch Probieren und fragen gelernt^^
Habe mir eine kleine Aufgabe gesucht und dann mithilfe von SELFHTML: JavaScript diese gelöst
Wenn es mal geharkt hat habe ich entweder eienn Freund gefragt oder eben selbst so lange probiert bis es klappte

Anzeige nach klick

Jetzt mitmachen!

Teilen