nicht angemeldet
Probleme mit innerHTML im IE
JürgenB
StruppiHallo!
Habe eine Funktion geschrieben die überprüft ob Inhalte eines Formulars ausgefüllt sind oder nicht, diese ausliest und an anderer Stelle auf der Seite wieder anzeigt. Dies funktioniert im Firefox problemlos.
Leider im IE nicht. Habe schon ein bißchen nachgeforscht und denke es liegt am innerHTML Element. Hat jemand eine Lösung wie ich folgende Funktion für beide Browser hinbekommen kann? Bin ratlos.
function initForms(){
var elementname="";
var elementvalue="";
var elementtype="";
var checkedvalue="";
function initForms(){
var elementname="";
var elementvalue="";
var elementtype="";
var checkedvalue="";
for (var i = 0; i < document.forms[0].length; ++i)
{
elementname=document.forms[0].elements[i].name;
elementvalue=document.forms[0].elements[i].value;
elementtype=document.forms[0].elements[i].type;
if (document.anchors[elementname]){
if(elementtype == "radio"){
for (var n = 0; n < document.forms[0].elements[elementname].length; n++) {
if (document.forms[0].elements[elementname][n].checked == true) {
document.anchors[elementname].innerHTML=document.forms[0].elements[elementname][n].value;
}
}
}else{
document.anchors[elementname].innerHTML=document.forms[0].elements[elementname].value;
}
if (document.anchors[elementname].innerHTML==""){
document.anchors[elementname].parentNode.parentNode.childNodes[0].setAttribute("style", "color:#FF0000; font-weight:bold");
}else{
document.anchors[elementname].parentNode.parentNode.childNodes[0].removeAttribute("style")
}
}
}
}
-
Hallo Chrisover,
Leider im IE nicht.
und wie äußert sich das "im IE nicht"?
function initForms(){
var elementname="";
var elementvalue="";
var elementtype="";
var checkedvalue="";function initForms(){
var elementname="";
var elementvalue="";
var elementtype="";
var checkedvalue="";...
ist das ein Kopierfehler oder sieht dein Script wirklich so aus?
Gruß, Jürgen
-
Hallo Jürgen!
Also das ist wohl ein kopierfehler gewesen. Denk dir einfach die ersten 5 Zeilen weg dann passt es.Das Problem im IE ist, dass er nicht erkennt welche Felder ausgefüllt sind oder nicht. Es wird dann logischerweise der Text nicht rot eingefärbt bei leeren Feldern. Auch die Ausgabe der Inhalte meiner Formularfelder funktioniert nicht.
Die Funktion wird per <body OnLoad="initForms()"> aufgerufen.
-
Hallo chrisover,
hast du schon mal an einigen "strategisch günstigen" Stellen in deinem Code Alerts eingebaut, um zu prüfen, welche Teile der Abfragen gewählt werden und wie die Inhalte der interessanten Variablen aussehen?
Gruß, Jürgen
-
Hallo Jürgen!
Danke für den Tip. Habe mal verschiedene Varianten durchprobiert und dabei ist aufgefallen dass der IE scheinbar einige Schleifen nicht durchläuft. Ich hab nur keine Ahnung warum er die nicht bearbeitet. Hier mal der Quelltext dazu mit Anmerkungen.function initForms(){
var elementname="";
var elementvalue="";
var elementtype="";
var checkedvalue="";for (var i = 0; i < document.forms[0].length; ++i)
{
elementname=document.forms[0].elements[i].name; // namen werden erkannt
elementvalue=document.forms[0].elements[i].value; // IE kann value aus <select> nicht lesen Firefox schon
elementtype=document.forms[0].elements[i].type; // types werden erkanntif (document.anchors[elementname]){
if(elementtype == "radio"){
for (var n = 0; n < document.forms[0].elements[elementname].length; n++) { // wird vom IE nicht ausgeführt
if (document.forms[0].elements[elementname][n].checked == true) {
document.anchors[elementname].innerHTML=document.forms[0].elements[elementname][n].value;}
}}else{ // wird vom IE nicht ausgeführt
document.anchors[elementname].innerHTML=document.forms[0].elements[elementname].value;
}
if (document.anchors[elementname].innerHTML==""){
document.anchors[elementname].parentNode.parentNode.childNodes[0].setAttribute("style", "color:#FF0000; font-weight:bold");
}else{
document.anchors[elementname].parentNode.parentNode.childNodes[0].removeAttribute("style")
}
}
}
}-
Danke für den Tip. Habe mal verschiedene Varianten durchprobiert und dabei ist aufgefallen dass der IE scheinbar einige Schleifen nicht durchläuft. Ich hab nur keine Ahnung warum er die nicht bearbeitet.
Liegt eventuell an dem von mir bereits erwähnten Fehlern oder kritischen Dingen die du da tust.
Struppi.
-
Hey Struppi!
Es muss aber an was anderem liegen. Habe mal die von dir angesprochenen kritischen Zeilen rausgeworfen und es hat sich leider nichts geändert.
chrisover
-
Es muss aber an was anderem liegen. Habe mal die von dir angesprochenen kritischen Zeilen rausgeworfen und es hat sich leider nichts geändert.
Du erwartest aber nicht, dass wir das erraten können. Ohne zugehörigen Quelltext läßt sich nicht sagen was bei dir falsch läuft. Am besten wäre mal eine Beispielseite.
Struppi.
-
Also zum Raten ist ja keiner hier nehme ich an. Die Funktion ist ja schon mal hier gepostet worden aber da kommt sie nochmal:
function initForms(){
var elementname="";
var elementvalue="";
var elementtype="";
var checkedvalue="";for (var i = 0; i < document.forms[0].length; ++i)
{
elementname=document.forms[0].elements[i].name;
elementvalue=document.forms[0].elements[i].value;
elementtype=document.forms[0].elements[i].type;if (document.anchors[elementname]){
if(elementtype == "radio"){
for (var n = 0; n < document.forms[0].elements[elementname].length; n++) {
if (document.forms[0].elements[elementname][n].checked == true) {
document.anchors[elementname].innerHTML=document.forms[0].elements[elementname][n].value;
}
}}else{
document.anchors[elementname].innerHTML=document.forms[0].elements[elementname].value;
}
if (document.anchors[elementname].innerHTML==""){
document.anchors[elementname].parentNode.parentNode.childNodes[0].setAttribute("style", "color:#FF0000; font-weight:bold");
}else{
document.anchors[elementname].parentNode.parentNode.childNodes[0].removeAttribute("style")
}
}
}
}Diese Funktion wird in meiner Seite bei
<body OnLoad="initForms()"> geladen und dann gibts in meinem Formular folgendes:<form action="blablabla" method="post">
<span style="position:absolute; left:420px"><a class="cont" name="quelle"></a></span> //Hier ist ein Anker wo der Wert angezeigt werden
// soll den man ins Feld eingibt.<input type="text" name="quelle" OnChange="initForms()">
<span style="position:absolute; left:420px"><a class="cont" name="test"></a></span>
<input type="radio" name="test" value="yes" OnChange="initForms()"> yes
<input type="radio" name="test" value="no" OnChange="initForms()"> no<input type="submit" name="add" value="Senden">
</form>Das ist hier mal kurz dargestellt was die Funktion machen soll.
Also wenn ein Wert eingegeben wird soll dieser an der Position meines Ankers mit dem zugehörigen Namen ausgegeben werden.Ich hoffe der Code reicht aus um einen Eindruck zu bekommen was ich vorhabe.
Danke.
chrisover-
Hi,
Also zum Raten ist ja keiner hier nehme ich an.
Um sich an ermuedenden Wiederholungen zu ergoetzen, ebenfalls nicht.
Die Funktion ist ja schon mal hier gepostet worden aber da kommt sie nochmal:
Die von Struppi angesprochenen ggf. kritischen Punkte sind darin nach wie vor unveraendert.
MfG ChrisB
-
Sorry. Mein Fehler.
Also dann nochmal von vorne. Die angesprochenen kritischen Punkte tun hier nix zur Sache die kann ich auch einfach weglassen, da sie sich nicht auf die eigentliche Aufgabe der Funktion beziehen. Dann sieht die Funktion wie folgt aus:function initForms(){
var elementname="";
var elementvalue="";
var elementtype="";
var checkedvalue="";for (var i = 0; i < document.forms[0].length; ++i)
{
elementname=document.forms[0].elements[i].name;
elementvalue=document.forms[0].elements[i].value;
elementtype=document.forms[0].elements[i].type;if (document.anchors[elementname]){
if(elementtype == "radio"){
for (var n = 0; n < document.forms[0].elements[elementname].length; n++) {
if (document.forms[0].elements[elementname][n].checked == true) {
document.anchors[elementname].innerHTML=document.forms[0].elements[elementname][n].value;
}
}}else{
document.anchors[elementname].innerHTML=document.forms[0].elements[elementname].value;
}
}
}
}Damit sind jetzt die kritischen Punkt raus aus der Nummer und ich komme leider immer noch nicht weiter.
Hat jemand einen Lösungsansatz für das Problem?-
Hi,
Also dann nochmal von vorne. Die angesprochenen kritischen Punkte tun hier nix zur Sache die kann ich auch einfach weglassen, da sie sich nicht auf die eigentliche Aufgabe der Funktion beziehen. Dann sieht die Funktion wie folgt aus:
Na dann kann ja jetzt die Debug-Phase beginnen.
Mache Kontrollausgaben (alert).
Wird in die Abfrage-Verzweigungen gesprungen, die du annimmst; wie oft werden deine Schleifen durchlaufen; haben abgefragte Eigenschaften die angenommenen, etc. pp.Da du ja innerHTML als Fehlerursache vermutest - was passiert, wenn du das rausnimmst, und ebenfalls durch simple Kontrollausgaben ersetzt?
MfG ChrisB
-
Also bin jetzt ein bißchen schlauer.
Alle Namen und Werte werden eingelesen.
Das Problem liegt wohl in folgender Zeile der Ausgabe:document.anchors[elementname].innerHTML=document.forms[0].elements[elementname].value;
Da bekomme ich folgende Fehlermeldung: "document.anchors[...] ist Null oder kein Objekt".
Die Anker lassen sich also nicht auf diese Weise ansprechen. Ich habe es dann mal wie folgt versucht.document.anchors[i].innerHTML=document.forms[0].elements[elementname].value;
i ist hierbei der Schleifenzähler und das funktioniert bedingt. Es gibt zwar eine Ausgabe aber immernoch die gleiche Fehlermeldung wie oben.
Auch folgendes gibt die gleiche Fehlermeldung aus:
document.anchors.elementname.innerHTML=document.forms[0].elements[elementname].value;Ich verstehe das nicht hab mich doch an die Vorgaben aus selfhtml gehalten da heisst es bei anchors allgemeine Verwendung:
"Es stehen folgende Arten zur Verfügung, mit JavaScript einen bestimmten Verweisanker anzusprechen:
Schema1: document.anchors[0].name
Schema2: document.anchors.Ankername.Eigenschaft
Schema3: document.anchors["Ankername"].Eigenschaft"Hat jemand einen Tip wie ich die Anker richtig ansprechen kann?
Danke.
chrisover-
Hat jemand einen Tip wie ich die Anker richtig ansprechen kann?
So wie es in selfhtml steht.
Struppi.
-
So das Problem ist gelöst.
Es lag an der Verwendung der Anker und nicht an innerHTML. Dabei sollte man auch das Kleingedruckte lesen. Dabei fällt dann auf, dass der IE Anker nur erkennen kann über die Nummer und nicht über den Namen.anchors: Allgemeines zur Verwendung
Schema1: document.anchors[0].name
Schema2: document.anchors.Ankername.Eigenschaft
Schema3: document.anchors["Ankername"].EigenschaftIm Internet Explorer ist es nicht möglich, mit dem Schema 2 und 3 auf einen Verweisanker zuzugreifen.
chrisover
-
-
-
-
-
-
-
-
-
-
-
-
-
-
document.anchors[elementname].parentNode.parentNode.childNodes[0].setAttribute("style", "color:#FF0000; font-weight:bold");
}else{
document.anchors[elementname].parentNode.parentNode.childNodes[0].removeAttribute("style")Einmal ist die Methode über Nodes nach Elementen zu suchen immer mit einem grossen Risiko behaftet, da die Browser die Knoten nicht gleich interpretieren.
Dann solltest du die Methode setAttribute vermeiden, kann im IE zu Problemen führen und du kannst natürlich nicht das style Attribute entfernen.Struppi.