Anzeige nach klick

…ist eine Skriptsprache, die die Möglichkeiten von HTML stark erweitert. Sie wird eingesetzt, um Internet-Seiten flexibel und interessant gestalten zu können. Beispiel: Formulare mit Berechnungsfunktionen / animierte Schaltflächen oder einfach fallender Schnee. - Fragen - Antworten –Tipps hier hinein...

Moderator: lauras

Beiträge bitte im neuen Forum

Anzeige nach klick

Beitragvon calvin » Donnerstag 3. Februar 2011, 17:03

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: Alles auswählen
<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
calvin
HTML-Newbie
 
Beiträge: 11
Registriert: Freitag 31. Dezember 2010, 01:53

Re: Anzeige nach klick

Beitragvon Sarkkan » Donnerstag 3. Februar 2011, 18:02

onclick (und alle anderen Eventhändler) ist keine Funktion, sondern eine Eigenschaft wie class, title, style,.. (:
Bedeutet, dass du diesem eine Funktion zuweisen musst :D
Code: Alles auswählen
document.getElementsByTagName('a')[0].onclick = document.write('bla');
(write löscht übrigens quasi alles andere^^ besser wäre vielleicht .innerHTML (: )
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln

Re: Anzeige nach klick

Beitragvon calvin » Donnerstag 3. Februar 2011, 19:12

Hmm


also mein Code sieht jetzt so aus:
Code: Alles auswählen
<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
calvin
HTML-Newbie
 
Beiträge: 11
Registriert: Freitag 31. Dezember 2010, 01:53

Re: Anzeige nach klick

Beitragvon Sarkkan » Donnerstag 3. Februar 2011, 20:36

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 @ http://localhost/jsOnclick.html#:12
Hab dann ein wenig hin und her überlegt.. und einige Test mit dem <a>-Element angestellt, von der Konsole aus :D 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: Alles auswählen
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: Alles auswählen
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 :D 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 :D
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 (=
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln

Re: Anzeige nach klick

Beitragvon calvin » Donnerstag 3. Februar 2011, 22:08

Achso :)

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

Den echten Satz kann ich ja dann bestimmt mit

Code: Alles auswählen
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 :)
calvin
HTML-Newbie
 
Beiträge: 11
Registriert: Freitag 31. Dezember 2010, 01:53

Re: Anzeige nach klick

Beitragvon Sarkkan » Donnerstag 3. Februar 2011, 22:24

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

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 :D
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln


Beiträge bitte im neuen Forum

Zurück zu JavaScript

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron