Thema: JavaScript ausführen in Joomla Content Page, Textänderung bei Link

Hallo Leute,
ich bräuchte Eure Hilfe bei folgender Sache: Ich hab eine Tabelle in der verschiendene Links stehen. Bei einem Klick auf einen dieser Links soll sich der Text in einem Paragrphen ändern.
Nachher soll das soweit gehen, dass sich auch ein Bild mit ändert, wenn man auf den Link klickt.

Hier der Quelltext:

<script type="text/javascript">
var anfangmail = "<a href=\"mailto:";
var endemail = "\">"
var endemailtag = "<\/a>";

function changeperson() {
name.innerHTML = name;
alter.innerHTML = alter;
kontakt.innerHTML = anfangmail + kontakt + endemail + kontakt + endemailtag;
}
</script>

<a href="javascript:var name = 'Peter'; alter = '38';
kontakt = 'peter@abc.de'; changeperson();" >Link 1</a>
<a href="javascript:var name = 'Tobias'; alter = '41';
kontakt = 'tobi@abc.de'; changeperson();" >Link 2</a>

<div align="center"><b><p id="name">Name</p></b><br /></div>
<div align="center"><p id="alter">Alter</p></div>
<div align="center"><p id="kontakt">Kontakt</p></div>

In Joomla füge ich das wie oben im JCE-Editor über den HTML Knopf ein. Die Java-Script Funktion ist aktiviert (in den JCE-Einstellungen).

Trotzdem funktioniert es nicht. Jemand eine Idee?

Also erstens verstehe ich nicht so ganz, warum du das so umständlich machst und nicht z.B. so:

HTML-Code:

<script type="text/javascript">
var anfangmail = "<a href=\"mailto:";
var endemail = "\">"
var endemailtag = "<\/a>";

function changeperson(name, alter, kontakt) {
name.innerHTML = name;
alter.innerHTML = alter;
kontakt.innerHTML = anfangmail + kontakt + endemail + kontakt + endemailtag;
}
</script>

<a href="javascript:changeperson('Peter', '38', 'peter@abc.de');" >Link 1</a>
<a href="javascript:changeperson('Tobias', '41', 'tobi@abc.de');" >Link 2</a>

<div align="center"><b><p id="name">Name</p></b><br /></div>
<div align="center"><p id="alter">Alter</p></div>
<div align="center"><p id="kontakt">Kontakt</p></div>

Und zweitens: Hast du es schonmal ohne Editor probiert?

...und drittens ist name, alter, kontakt nicht definiert!

Woher soll die JS-Funktion welches Element geändert werden soll.
http://de.selfhtml.org/javascript/ob..._element_by_id (nur mal so als Tip)

Wäre die Verwendung eines solchen, oder ähnlichen Tools nicht geeigneter?
Am Beispiel des List Styling lässt sich erahnen auf was ich hinaus möchte. Man nehme eine Kategorie, erstellt in dieser einen Artikel je Person und einen weiteren Artikel in dem das YOOcarousel geladen wird.
Dadurch das es sich um Artikel handelt, greifen weitere Content Plugins wie E-Mail Cloak oder Lightbox Scripte.
Wie bereits erwähnt finden sich im Extension Directory auch Content Plugins, die anhand einer Listenstruktur genau solche "Slider" erzeugen.

Davon abgesehen, Joomla! bringt Mootools 1.1 bzw. 1.2 mit - nutzen.

Danke, Leute.

Ich habe Deine Änderungen, Harmageddon, mal angenommen und auch die IDs in den HTML-p-Tags angepasst, joom_mob-i-co, sodass der Code jetzt so aussieht:

Code:

<script type="text/javascript">  function changeperson(name, alter, kontakt) { namep.innerHTML = name; alterp.innerHTML = alter; kontaktp.innerHTML = kontakt} </script> <a href="javascript:changeperson('Peter', '38', 'peter@abc.de');" >Link 1</a> <a href="javascript:changeperson('Tobias', '41', 'tobi@abc.de');" >Link 2</a> <div align="center"><b><p id="namep">Name</p></b><br /></div> <div align="center"><p id="alterp">Alter</p></div> <div align="center"><p id="kontaktp">Kontakt</p></div>

In einer Beispiel-HTML funktioniert alles in Firefox.
Wenn ich den Quelltext in einer J!-Page speichere, klappts nicht.

Der QT sieht dann aus wie im Bild:
(Man beachte das von J! komische, eingefügte Zeugs nahe der JS-function)
http://img263.imageshack.us/i/bild5q.png/

Außerdem wird in der Statusleiste dann etwas sehr komisches angezeigt, als könne der Browser nicht gescheit zwischen HTML und JS trennen:
http://img34.imageshack.us/i/bild7fk.png/

Danke auch für Deine Antwort, Barnum, auch wenn ich damit ehrlichgesagt nicht so viel anfangen konnte. Ich halte Plugins für den Anwendungsfall für übertrieben. Es soll eine einfache, kleine Seite werden, auf der sich ein paar Personen vorstellen. Indem der User auf einen verlinkten Namen linkt, soll sich der Name, das Alter, u.Ä. ändern. Zusätzlich auch noch mit kleinem Passfoto.

OK,
das funktioniert mit J! nicht, weil das E-Mailcloaking-Plug-In greift und deine E-Mail umwandelt.
Schalte es aus! Erweiterungen -> Plugins -> Inhalt - E-Mail-Verschleierung

Und dann hast Du mich falsch verstanden mit den IDs.
Lies nochmal bei SelfHtml und schau Dir meinen Code an.

// edit: Es ging nicht um ein zusätzliches P sondern darum das die var namep nicht definiert ist.

HTML-Code:

<script type="text/javascript">
<!--//
	function changeperson(name, alter, kontakt)
	{ 
		var namep = document.getElementById('namep');
		namep.innerHTML = name; 
		
		var alterp = document.getElementById('alterp');
		alterp.innerHTML = alter; 
		
		var kontaktp = document.getElementById('kontaktp');
		kontaktp.innerHTML = kontakt;
	}
//-->
</script>

Funktioniert!
Den Rest kannst so lassen!

Bunt wird es wenn Du den erweiterten Editor verwendest und auf die spitzen Klammern (HTML-CODE) anstatt auf die Raute (CODE) klickst.

Zitat von raggi40

BÄM! Tatsächlich, funktioniert!

Dann tue uns allen doch noch den Gefallen und setze das Thema auf gelöst, damit man nicht immer wieder rein schauen muss.

Ersten Beitrag bearbeiten -> Erweitert -> Feld vor dem Titel auf gelöst setzen.
Auch Danke.

magst du vielleicht das Ergebnis als Screenshot präsentieren bitte.