Wie mache ich JavaScript "dynamisch"?

[Jean Pascal]

Guten Morgen,

ich mache gerade meine ersten Schritte mit JavaScript.

Ich möchte gerne einen Text innerhalb eines HTML-Dokumentes dynamisch - basierend auf der Select-Box-Auswahl des Benutzers - ändern.

Dazu habe ich folgende Abfrage erstellt:

(...)

<SELECT name="options">
<OPTION value="a" onClick="value=1">Option 1</option>
<OPTION value="b" onClick="value=1">Option 2</option>
</SELECT>

<SCRIPT LANGUAGE="JavaScript">

if (value==1){
document.write("Hello World");
}

</SCRIPT>

(...)

Nun ist es ja so, dass die if-Anfrage bereits ausgeführt wurde - und negativ war - bevor der Nutzer überhaupt die onClick-Methode ausführen konnte.

Wie schaffe ich es, JavaScript "dynamisch zu machen", d.h. den Aktionen wie onClick "zuzuhören" und beim Ausführen den HTML-Text dynamisch zu verändern?

Würde mich wahnsinnig über Unterstützung freuen.

Jean

[Arthur Dent]

Morgäähn,

Ich möchte gerne einen Text innerhalb eines HTML-Dokumentes dynamisch - basierend auf der Select-Box-Auswahl des Benutzers - ändern.

Dazu habe ich folgende Abfrage erstellt:

(...)

<SELECT name="options">
<OPTION value="a" onClick="value=1">Option 1</option>
<OPTION value="b" onClick="value=1">Option 2</option>
</SELECT>

<SCRIPT LANGUAGE="JavaScript">

if (value==1){
document.write("Hello World");
}

</SCRIPT>

(...)

Nun ist es ja so, dass die if-Anfrage bereits ausgeführt wurde - und negativ war - bevor der Nutzer überhaupt die onClick-Methode ausführen konnte.

also, mal angenommen, <option> hätte ein onclick-Event (was nicht der Fall ist!), dann müsstest du hier eine Funktion aufrufen, z.B. onclick="foo(1);" und in deinen Script-Bereich (welcher dann übrigens in den head deiner Seite gehört und sich über ein text="type/javascript" freuen würde), müsstest du dann die Funktion foo(value) definieren:

  
<script type="text/javascript">  
funtion foo(value)  
{  

> if (value==1){  
> document.write("Hello World");  
> }  

}  
</script>  

allerdings hat option kein onclick, deshalb muss der abzufragende Wert in das value-Attribut von option und der Funktionsaufruf ins onchange-Event des <select>

  

> <SELECT name="options" onchange="foo(this.value);">  
> <OPTION value="1">Option 1</option>  
> <OPTION value="2">Option 2</option>  
> </SELECT>  

Gruß,
Arthur D.

[wahsaga]

hi,

allerdings hat option kein onclick, deshalb muss der abzufragende Wert in das value-Attribut von option und der Funktionsaufruf ins onchange-Event des <select>

Und das document.write, nach dem Laden des Dokumentes aufgerufen, den aktuellen Dokumentinhalt ersetzt, sollte vielleicht auch noch erwähnt werden.

Alternativen, um Textinhalt auszutauschen, wären .innerHTML oder .data eines Textknotens, oder die Neuerzeugung von Knoten über's DOM (createTextNode/appendChild/replaceChild).

gruß,
wahsaga

[Jean Pascal]

Hallo wahsaga,

danke auch für deinen Zusatz.

Was ich wirklich gebrauchen könnte, wäre mal ein Index, in dem einfach alle Methoden für JavaScript genannt und erklärt werden, so wie man in Flash einen Index für AS hat.

Gibt es sowas?

Schöne Grüße

Jean

[Cybaer]

Hi,

Was ich wirklich gebrauchen könnte, wäre mal ein Index, in dem einfach alle Methoden für JavaScript genannt und erklärt werden, so wie man in Flash einen Index für AS hat.

Quickbar

Deutlich vollständiger aber ohne Erklärung (die ist im Buch): JavaScript and Browser Objects Quick Reference

Gruß, Cybaer

[Jean Pascal]

Hi,

http://www.dannyg.com/ref/jsquickref.html@title=JavaScript

sehr genial. Danke für den Link.

Gruß Jean

[Mathias Brodala]

Hallo Jean.

Was ich wirklich gebrauchen könnte, wäre mal ein Index, in dem einfach alle Methoden für JavaScript genannt und erklärt werden, so wie man in Flash einen Index für AS hat.

Zumindest alle offiziellen DOM-Methoden findest du in der entsprechenden Spezifikation.

Einen schönen Donnerstag noch.

Gruß, Mathias

[Jean Pascal]

Hi Mathias,

auch ein sehr hilfreicher Link, danke.

Jean

[Jean Pascal]

Hi Arthur,

Danke für den Tipp mit onchange! Wenigstens dürfte das onClick-Event im Option-Tag die Kenner amüsiert haben.

Good morning, good evening, usw. ...

Jean

[Joachim]

Hi,

Wie schaffe ich es, JavaScript "dynamisch zu machen", d.h. den Aktionen wie onClick "zuzuhören" und beim Ausführen den HTML-Text dynamisch zu verändern?

Ich empfehle Dir, Dich eingehend mit Dom-Methoden zu beschäftigen. Zur Anregung ein kleiner Test, am Besten Du schaust alle Methoden einmal in der Referenz nach, um Ihre Arbeitsweise kennenzulernen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<script type="text/javascript">
function add_text_node(id, txt) {
    clean_element(id); // Funktion zum 'Leerräumen' des p-tags
    var el  =  document.getElementById(id);
    var txt =  document.createTextNode(txt);
    el.appendChild(txt);
}

function clean_element(id) {
    var el      =  document.getElementById(id);
    var clone   =  el.cloneNode(false);
    el.parentNode.replaceChild(clone,el);
    el.id       =  id;
}
</script>
</head>
<body>
<form>
    <select onchange="add_text_node('out', this[this.selectedIndex].value)">
        <option value="Hier soll Text hin">Wählen...</option>
        <option value="erster Text">erster Text</option>
        <option value="zweiter Text">zweiter Text</option>
        <option value="dritter Text">dritter Text</option>
        <option value="vierter Text">vierter Text</option>
    </select>
</form>
<p id="out">Hier soll Text hin</p>
</body>
</html>

Gruesse, Joachim

[Jean Pascal]

Hallo Joachim,

danke erstmal für das Beispiel und den Hinweis auf DOM. Ich werde wohl noch etwas Zeit brauchen, um mich einzuarbeiten. DOM ist mir zwar ein Begriff, aber Neuland.

Grüße Jean

[Cybaer]

Hi,

danke erstmal für das Beispiel und den Hinweis auf DOM. Ich werde wohl noch etwas Zeit brauchen, um mich einzuarbeiten. DOM ist mir zwar ein Begriff, aber Neuland.

Nimm innerHTML - ist einfacher. Wenn Du erstmal so weit bist, daß Du mit DOM arbeiten mußt, dann kannst Du es auch ... ;)

Gruß, Cybaer