Problem mit getElementById

A

awnetti

Mitglied
Hallo zusammen,

ich habe hier ein Javascript, das nach jedem @ und - ein <wbr> hinzufügt.

Code: 
<script>
function showWrap(string) {
 var wrap = new Object();
  wrap['@'] = '@';
  wrap['-'] = '-';

  for (value in wrap) {
	wbr = wrap[value] + "<wbr>";
    var search = RegExp("[.*]?("+ value +")[.*]?","gi");
    string = string.replace(search, wbr);
  }
  return string;
}

window.onload = function doWrap() {
	string = document.getElementById("ausgabe").innerHTML;
	document.getElementById("ausgabe").innerHTML = showWrap(string);
}
</script>

HTML: 
<table id="ausgabe" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
     <td><span style="background-color:#0099CC;">irgend ein text</span></td>
   </tr>
   <tr>
     <td><a href="" id="wrap">namedesemailbesitzers@irgendwas-und-irgendwie.com</a></td>
   </tr>
      <tr>
     <td><a href="" id="wrap">namedesemailbesitzers@irgendwas-und-irgendwie.com</a></td>
   </tr>
 </table>

Jetzt zu meinem Problem:
1. Spuckt der IE mir einen "Unbekannten Laufzeitfehler" aus. Wieso?
und
2. Wenn ich die table ID="ausgabe" ansprechen, funktioniert das ganze. Alle @ und - werden durch ein <wrap> ergänzt, aber eben auch die, die nicht ersetzt werden sollen, z.B. "background-color".
Jetzt hab ich eine zweite id="wrap" im <a href> vergeben, diese wird aber nicht angesprochen wenn ich sie im Javascript einsetzte. Ist die Schreibweise, also "document.getElementById("ausgabe").innerHTML" falsch? Wie muss ich das schreiben wenn das Javascript an die "wrap" id herankommen soll?

Wäre schön wenn mir jemand einen Tip geben könnte!
Danke :)
 
Moin,

du versuchst die innerHTML-Eigenschaft einer Tabelle zu ändern.
Das ist im IE nicht möglich und erzeugt den erwähnten Fehler.

Nehme ein anderes Element(keine Tabellenelemente (ausser TH/TD) )...und es sollte wie gewünscht funktionieren.
 
Ja das habe ich versucht, nämlich mit der die ID im <a href>.

Code: 
window.onload = function doWrap() {
	string = document.getElementById("wrap").innerHTML;
	document.getElementById("wrap").innerHTML = showWrap(string);
}

Damit ist zwar der Fehler im IE weg, aber das ganze funktioniert überhaupt nicht mehr im FF :confused:
 
Das kann ich nicht nachvollziehen...bei mir haut es überall gleich hin:
Code: 
<body>
<a id="wrap" href="#">namedesemailbesitzers@irgendwas-und-irgendwie.com</a>
<script type="text/javascript">
function showWrap(string) {
 var wrap = new Object();
  wrap['@'] = '@';
  wrap['-'] = '-';

  for (value in wrap) {
	wbr = wrap[value] + "<wbr>";
    var search = RegExp("[.*]?("+ value +")[.*]?","gi");
    string = string.replace(search, wbr);
  }
  return string;
}

window.onload = function doWrap() {
	string = document.getElementById("wrap").innerHTML;
	document.getElementById("wrap").innerHTML = showWrap(string);
	alert(document.getElementById('wrap').innerHTML);
}
</script>
</body>
 
Dann versuch doch bitte mal das:

Beispiel 1:
HTML: 
<body>
<a id="wrap" href="#">namedesemailbesitzers@irgendwas-und-irgendwie.com</a><br />
<a id="wrap" href="#">namedesemailbesitzers@irgendwas-und-irgendwie-zwei.com</a><br />
<a id="wrap" href="#">namedesemailbesitzers@irgendwas-und-irgendwie-zwei-und-drei.com</a>
</body>

Hier wirst musst Du feststellen, dass nur die erste Email umbrochen wird. Die zweite und dritte werden ignoriert.

Ausserdem befinden sich meine <a href> in einer Tabelle, das ist schon wichtig und muss so bleiben.

Beispiel 2:
HTML: 
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a id="wrap" href="#">namedesemailbesitzers@irgendwas-und-irgendwie.com</a></td>
  </tr>
  <tr>
    <td><a id="wrap" href="#">namedesemailbesitzers@irgendwas-und-irgendwie-zwei.com</a></td>
  </tr>
  <tr>
    <td><a id="wrap" href="#">namedesemailbesitzers@irgendwas-und-irgendwie-zwei-und-drei.com</a></td>
  </tr>
</table>
</body>

Hier wird nun keines der <a href> umbrochen.

Im Übrigen geht es mir in erster Linie um den Firefox, den hier funktioniert es nicht. Wenn man den Browser kleiner zieht als die Email lang ist, sollte der Umbruch eben an den Stellen @ und - statt finden. Im Beispiel 1 funktioniert es mit dem ersten <a href>, im Beispiel 2 mit keinem.

Hier ist glaube ich mehr falsch als ich dachte!?
 
1. Eine ID darf nur 1 mal vergeben werden
2. <wbr> ist kein regulärer Bestandteil irgendeiner Spezifikation, daher ist es halt so, dass sich die Browser dort verschieden varhalten, weil nicht festgelegt ist, wie sie sich verhalten sollen.
 
"word-break" und "word-wrap" funktionieren im FF leider nicht! Damit komme ich nicht weiter.

Also zurück zu meinem ersten Lösungsansatz.

Auch wenn <wbr> kein regulärer Bestandteil irgendeiner Spezifikation ist, intepretieren ihn alle Brower (incl. FF) richtig, wenn ich <wbr> manuell einfüge.

Diese Beispiel ohne Javascript funktioniert!:
HTML: 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
     <td><a href="">namedesemailbesitzers@<wbr>irgendwas-<wbr>und-<wbr>irgendwie.com</a></td>
   </tr>
      <tr>
     <td><a href="">namedesemailbesitzers@<wbr>irgendwas-<wbr>und-<wbr>irgendwie.com</a></td>
   </tr>
 </table>

Also stimmt folglich etwas nicht mit meinem Javascript :confused:

Wenn ich nur eine ID vergebe, funktioniert dieses Beispiel "mit Javascript":

Code: 
<script>
function showWrap(string) {
 var wrap = new Object();
  wrap['@'] = '@';
  wrap['-'] = '-';

  for (value in wrap) {
	wbr = wrap[value] + "<wbr>";
    var search = RegExp("[.*]?("+ value +")[.*]?","gi");
    string = string.replace(search, wbr);
  }
  return string;
}

window.onload = function doWrap() {
	string = document.getElementById("ausgabe").innerHTML;
	document.getElementById("ausgabe").innerHTML = showWrap(string);
}
</script>

HTML: 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr><td><a href="">namedesemailbesitzers@irgendwas-und-irgendwieEins.com</a></td></tr>
	<tr id="ausgabe"><td><a href="">namedesemailbesitzers@irgendwas-und-irgendwieZweiundDrei.com</a></td></tr>
	<tr><td><a href="" style="background-color:#99FF99;">namedesemailbesitzers@irgendwas-und-irgendwieEins.com</a></td></tr>
</table>

Die zweite Email wird im FF nach @ und - umbrochen!

Da ich aber mehr als nur eine Zeile zum umbrechen habe, wäre getElementByName() oder getElementByTagName() vielleicht besser?

Hab ich versucht - aber kein Erfolgt gehabt :(
Allerdings befürchte ich, dass ich es nicht richtig eingesetzt habe!

Wie ist den die richtige Schreibweise wenn ich den <tr>-Tags einen Name="ausgabe" gebe und diese dann im Script ansprechen will?
 
Hi,

die Funktion heisst getElementsByName. Allerdings liefert diese nur die Elemente zurück, die ein name-Attribut besitzen können (a, iframe, frame usw, nicht aber tr).

Möglich wäre es, die Elemente, die geändert werden sollen, mit einer Klasse zu versehen. Mittels einer Funktion werden diese Elemente ermittelt und entsprechend bearbeitet.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function getElementsByClassName(){
  // getElementsByClassName.arguments[0] => Name der Klasse (string)

  var arrHelp = new Array();

  // Array mit allen Kindelementen erstellen
  var arrTags = (navigator.userAgent.toLowerCase().indexOf("msie") != -1) ? document.all : document.getElementsByTagName('*');

  // Suchmuster erstellen
  var strPattern = eval("/\\b"+getElementsByClassName.arguments[0]+"\\b/");

  // Alle Elemente durchlaufen
  for(var varEntry in arrTags){
    // Fall eine Klasse existiert UND dem Suchkriterium entspricht
    if((arrTags[varEntry].className) && (arrTags[varEntry].className.match(strPattern))){
      // In Klassenarray schreiben
      arrHelp[arrHelp.length] = arrTags[varEntry];
    }
  }

  return arrHelp;  // Elemente mit übereinstimmenden Klassenname zurück geben (array)
}

function showWrap(string) {
 var wrap = new Object();
  wrap['@'] = '@';
  wrap['-'] = '-';

  for (value in wrap) {
    wbr = wrap[value] + "<wbr>";
    var search = RegExp("[.*]?("+ value +")[.*]?","gi");
    string = string.replace(search, wbr);
  }
  return string;
}

window.onload = function() {
  // Array mit allen Elementen erstellen, welche die Klasse "wrap" enthalten
  var arrWrap = getElementsByClassName("wrap");

  // Array durchlaufen
  for(var i=0; i<arrWrap.length; i++){
    string = arrWrap[i].innerHTML;
    arrWrap[i].innerHTML = showWrap(string);
  }
}
//-->
</script>
</head>
<body>
<a class="wrap" href="#">namedesemailbesitzers@irgendwas-und-irgendwie.com</a><br />
<a class="wrap" href="#">namedesemailbesitzers@irgendwas-und-irgendwie-zwei.com</a><br />
<a class="wrap" href="#">namedesemailbesitzers@irgendwas-und-irgendwie-zwei-und-drei.com</a>
</body>
</html>

Ciao
Quaese
 
Okay, vielen Dank!
Das ist allerdings, muss ich leider gestehen, noch etwas zu hoch für mich! :eek:
Deshalb noch eine Frage, weil ich es selbst nicht gelösst bekommen.

Der Umbruch funktioniert bei "-" wunderbar, wieso jetzt nicht mehr bei "@"?

Danke für die Hilfe :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück