Javascript input feld mit onclick event

[t0bias]

Hallo,

Ich hab folgendes Problem:

Wenn ich mit Javascript eine Tabelle erstelle, die einen Radio Button enthaelt der Radio Button hat das event onclick. onclick ruft eine Javascript Methode auf. Allerdings wird bei dem anklicken des Radio Buttons nie eine Javascript Methode aufgerufen.

Es funktioniert mit Mozilla Firefox, allerdings nicht mit dem Internet Explorer. Wenn ich den erzeugten HTML code jedoch in eine andere HTML Datei kopiere und diese mit dem IE oeffne funktioniert es.

Der Javascript Code sieht wie folgt aus:

function getTable()
{
        var x = xmlDoc.getElementsByTagName("item");
 var table = document.createElement("table");
 table.setAttribute("id", "table");
 table.setAttribute("cellPadding",5);
 var tmp = document.createElement("tbody");

table.appendChild(tmp);
 var row = document.createElement('tr');
 var container = document.createElement("th");
 row.appendChild(container);
 for (j=0;j<x[0].childNodes.length;j++)
 {
  if (x[0].childNodes[j].nodeType != 1) continue;
  var container = document.createElement("th");
  var theData = document.createTextNode(x[0].childNodes[j].nodeName);
  container.appendChild(theData);
  row.appendChild(container);
 }
 tmp.appendChild(row);

for (i=0;i<x.length;i++)
 {
  var row = document.createElement("tr");
  row.setAttribute("id", i);
  if(i%2 == 0) row.setAttribute("bgcolor", "#808080");
  var select = document.createElement("td");
  var button = document.createElement("input");
  button.setAttribute("type", "radio");
  button.setAttribute("onclick","displayDetail("+i+")");
  select.appendChild(button);
  row.appendChild(select);

for (j=0;j<x[i].childNodes.length;j++)
  {
   if (x[i].childNodes[j].nodeType != 1) continue;
   var container = document.createElement("td");

var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
   if(j==1){
    var link = document.createElement("a");
        link.setAttribute("href", theData);
    link.setAttribute("target", "_blank");
    link.appendChild(theData);
    theData = link;
   }
   container.appendChild(theData);
   row.appendChild(container);
  }
  tmp.appendChild(row);
 }
 table.appendChild(tmp);
 document.getElementById("writeroot").replaceChild(table, document.getElementById("writeroot").firstChild);
}

Der erzeugte HTML code sieht wie folgt aus:

<DIV id=writeroot>
<TABLE id=table cellPadding=5>
<TBODY>
<TR>
<TH></TH>
<TH>title</TH>
<TH>link</TH>
<TH>description</TH></TR>

<TR id=0 bgcolor="#808080"> <TD><INPUT onclick=displayDetail(0) type=radio></TD> <TD>Putting RDF to Work</TD> <TD><A href="http://www.google.de" target=_blank>http://xml.com/pub/2000/08/09/rdfdb/index.html</A></TD> <TD>Tool and API support for the Resource Description Frameworkis slowly coming of age. Edd Dumbill takes a look at RDFDB,one of the most exciting new RDF toolkits.</TD>
</TBODY>
</TABLE>
</DIV>

Hat jemand eine Idee woran es liegen koennte?

Gruss,
Tobias

[t0bias]

---snip

<DIV id=writeroot>
<TABLE id=table cellPadding=5>
<TBODY>
<TR>
<TH></TH>
<TH>title</TH>
<TH>link</TH>
<TH>description</TH></TR>

<TR id=0 bgcolor="#808080"> <TD><INPUT onclick=displayDetail(0)

Versuch mal <INPUT onclick="javascript:displayDetail(0);" type=radio>
Zudem sehe ich in deinem Script oben keine  Funktion mit dem
Namen "displayDetail(0)", ist das der gesamte Code?

»»type=radio></TD> <TD>Putting RDF to Work</TD> <TD><A href="http://www.google.de" target=_blank>http://xml.com/pub/2000/08/09/rdfdb/index.html</A></TD> <TD>Tool and API support for the Resource Description Frameworkis slowly coming of age. Edd Dumbill takes a look at RDFDB,one of the most exciting new RDF toolkits.</TD>

</TBODY>
</TABLE>
</DIV>

Hat jemand eine Idee woran es liegen koennte?

Gruss,
Tobias

Gruss,

der andere Tobias

[t0bias]

<TH>description</TH></TR>

<TR id=0 bgcolor="#808080"> <TD><INPUT onclick=displayDetail(0)

Versuch mal <INPUT onclick="javascript:displayDetail(0);" type=radio>

Hab es schon mit der von der dir beschriebenen Methode probiert, funktioniert allerdings leider nicht. :(
In der Methode displayDetail(id) ist ganz am Anfang ein prompt("test"); untergebracht, was ich nie zu gesicht bekomme.

Es handelt sich bei den HTML Dateien um XHTML Dokumente. Vlt haengt es damit noch zusammen.

Gruss,
Tobias

[wahsaga]

hi,

Es funktioniert mit Mozilla Firefox, allerdings nicht mit dem Internet Explorer.

Kommen Fehlermeldungen im IE?

table.setAttribute("id", "table");

setAttribute soolltest du vermeiden, da hat der IE oftmals Probleme mit.

Nutze stattdessen die folgende Syntax:
elementreferenz.attributname = wert;

Für obiges Beispiel also
table.id = "table";

gruß,
wahsaga

[t0bias]

hi,

Es funktioniert mit Mozilla Firefox, allerdings nicht mit dem Internet Explorer.

Kommen Fehlermeldungen im IE?

Es kommen keine Fehlermeldungen. Wenn ich auf den Radio Button klicke passiert einfach nichts.

table.setAttribute("id", "table");

setAttribute soolltest du vermeiden, da hat der IE oftmals Probleme mit.

Nutze stattdessen die folgende Syntax:
elementreferenz.attributname = wert;

Für obiges Beispiel also
table.id = "table";

gruß,
wahsaga

Hab es abgeaendert. Danke fuer den Tip.

gruss,
Tobias

[Andy]

<TR id=0 bgcolor="#808080"> <TD><INPUT onclick=displayDetail(0) type=radio>

Der Internet Explorer hat oftmals Probleme wenn man keine " schreibt. Versuche mal Testweise document.write und alles mit Anführungszeichen.

[wahsaga]

hi,

<TR id=0 bgcolor="#808080"> <TD><INPUT onclick=displayDetail(0) type=radio>

Der Internet Explorer hat oftmals Probleme wenn man keine " schreibt. Versuche mal Testweise document.write und alles mit Anführungszeichen.

Diesen Code hat er, so wie ich das verstanden habe, nicht selber geschrieben - sondern das ist die Kontrolle seiner DOM-Manipulationen mittels innerHTML.

gruß,
wahsaga

[t0bias]

Der Internet Explorer hat oftmals Probleme wenn man keine " schreibt. Versuche mal Testweise document.write und alles mit Anführungszeichen.

Diesen Code hat er, so wie ich das verstanden habe, nicht selber geschrieben - sondern das ist die Kontrolle seiner DOM-Manipulationen mittels innerHTML.

gruß,
wahsaga

So sieht das aus. Hab es mittels Javascript/DOM generiert.

[Andy]

aber er könnte die zeilen in denen der code geschrieben wird, probehalber durch document.write ersetzten.

So habe ich das gemeint.

[wahsaga]

hi,

aber er könnte die zeilen in denen der code geschrieben wird, probehalber durch document.write ersetzten.

Wozu?

Er will sauber Elemente mittels DOM-Methoden erzeugen und einhängen, und nicht mittels document.write irgendwas ins Dokument klatschen.

gruß,
wahsaga

[wahsaga]

hi,

row.setAttribute("id", i);

Ungültiger Attributwert - eine ID darf nicht mit einer Ziffer beginnen.

button.setAttribute("onclick","displayDetail("+i+")");

Weise mal nur die Funktionsreferenz zu:
button.onclick = displayDetail;

Und lasse die Funktion sich den benötigten Wert selber holen - beispielsweise, in dem du ihn mit am Button ablegst:

button.Funktionsparameter = i;

Zugriff darauf innerhalb der Funktion dann über this.Funktionsparameter

gruß,
wahsaga

[t0bias]

hi,

row.setAttribute("id", i);

Ungültiger Attributwert - eine ID darf nicht mit einer Ziffer beginnen.

Danke, fuer den Hinweis. Hab es abgeaendert.

button.setAttribute("onclick","displayDetail("+i+")");

Weise mal nur die Funktionsreferenz zu:
button.onclick = displayDetail;

Und lasse die Funktion sich den benötigten Wert selber holen - beispielsweise, in dem du ihn mit am Button ablegst:

button.Funktionsparameter = i;

Zugriff darauf innerhalb der Funktion dann über this.Funktionsparameter

gruß,
wahsaga

Hab den Aufruf wie folgt abgeandert:
button.setAttribute("onclick", displayDetail);
button.setAttribute("FunktionsParameter", i);

nun funktioniert es im IE aber nicht mehr mit Firefox.
Kann es sein das es mit den Anfuehrungsstrichen zusammen haengt?
Denn wenn ich es zu
button.setAttribute("onclick", "displayDetail()");
abaendere, funktioniert der Methodenaufruf mit Firefox aber wieder nicht mit IE. Und kann Firefox mit dem "FunktionsParameter" umgehen?
Weil ich konnte den Wert nicht auslesen mit dem IE.

Gruss,
Tobias

[wahsaga]

hi,

Hab den Aufruf wie folgt abgeandert:
button.setAttribute("onclick", displayDetail);
button.setAttribute("FunktionsParameter", i);

Was hatten Wir ihm denn bezüglich setAttribute gesagt ...?

gruß,
wahsaga