JavaScript: Anzuwendendes Element

[mrx]

Hallo!
Ich versuche, per JavaScript den Inhalt des Divs zu ändern:

  
<script type="text/javascript">  
change(element)  
{  
document.getElementById(element).innerHTML="hallo";  
}  
</script>  

  
<div style="height:100px; width:100px; background-color:red" id="test"></div>  
<a href="" onClick=change(test)>hier</a>  

Allerdings passiert nicht. Da ich mich kaum mit JavaScript beschäftige, weiß ich nicht, was ich ändern muss. Vielleicht könnt ihr es mir sagen.
Danke!

[Beat]

Allerdings passiert nicht.
<a href="" onClick=change(test)>hier</a>

Der Wert des onclick Attributs ist "change".
Du willst das durch angemessene Syntax zu deinen Gunsten ändern.
Eventuell willst du übrigens nicht den Inhalt eine variable test übergeben (die womöglich nicht existiert) sondern ein Literal genannt 'test'.

mfg Beat

[Gunnar Bittersmann]

@@Beat:

nuqneH

Allerdings passiert nicht.
<a href="" onClick=change(test)>hier</a>

Der Wert des onclick Attributs ist "change".
Du willst das durch angemessene Syntax zu deinen Gunsten ändern.

Siehe [HTML401 §3.2.2]

Eventuell willst du übrigens nicht den Inhalt eine variable test übergeben (die womöglich nicht existiert) sondern ein Literal genannt 'test'.

Eventuell willst du auch nicht die ID, sondern die Referenz auf das Elementobjekt übergeben. Also document.getElementById() nicht innerhalb der Funktion ausführen, sondern (falls überhaupt nötig) außerhalb.

Qapla'

[mrx]

Hi!
Hab versucht mal eure Ratschläge zu befolgen, aber auch so geht es nicht:

  
<script type="text/javascript">  
function change(ele)  
{  
ele.innerHTML="hallo";  
}  
</script>  
  
  
  
<div style="height:100px; width:100px; background-color:red" id="test"></div>  
<a href="" onClick="change(document.getElementById('test'))">hier</a>

[ChrisB]

Hi,

Hab versucht mal eure Ratschläge zu befolgen, aber auch so geht es nicht:

<div style="height:100px; width:100px; background-color:red" id="test"></div>
<a href="" onClick="change(document.getElementById('test'))">hier</a>[/code]

Vermutlich merkst du nur nichts davon, weil sofort nach Ausführung der Funktion die Default-Funktionalität des Links ausgeführt wird - nämlich eine neue Seite zu laden (die hier auch wieder nur die selbe ist, weil der Inhalt des href-Attributes leer ist).

Informiere dich entweder, wie man die Default-Aktion nach dem Ausführen des onclick-Handlers unterbindet; oder nutze onlick gleich auf einem anderen Element, welches keine Default-Funktionalität hat.

MfG ChrisB

[Gunnar Bittersmann]

@@mrx:

nuqneH

Hab versucht mal eure Ratschläge zu befolgen, aber auch so geht es nicht:

Doch geht. Es steht (kurz) "hallo" im roten Kasten.

<a href="" onClick="change(document.getElementById('test'))">hier</a>

Nach dem Ausführen von change(document.getElementById('test')) wird dem Link (@href) gefolgt. Der führt zur aktuellen Seite, die wird erneut geladen und das "hallo" ist wieder weg.

Optionen:
(1) durch 'return false;' nicht dem Link folgen:
    <a href="" onClick="[code lang=javascript]change(document.getElementById('test')); return false;">hier</a>[/code]

(2) Nicht die aktuelle Seite verlinken:
    <a href="javascript:;" onClick="[code lang=javascript]change(document.getElementById('test'));">hier</a>[/code]

(3) Wenn kein Link, dann kein 'a'-Element:
    <button onClick="[code lang=javascript]change(document.getElementById('test'));">hier</button>[/code]

(1) und (2) sind der Vollständigkeit halber erwähnt, (3) wäre hier wohl das Mittel der Wahl.

Qapla'