Schrift
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]2295[/thread]

JS-DOM - Probleme mit createElement



<< >> 7 Einträge, 1 Seite
Strat
 2006-05-14 00:00
#24764 #24764
User since
2003-08-04
5246 Artikel
ModeratorIn
[Homepage] [default_avatar]
Hallo Leute,

ich spiele gerade als Vorbereitung auf AJAX ein wenig mit dem DOM rum und bin dabei auf folgendes Problem gestossen:

[html]
...
<body>
<form name="SendForm" action="" method="post" onsubmit="return AddMessage()">
Input:
<input type="text" id="inputLine" value="" />
<input type="submit" name="sendButton" value="Send" />
</form>

<div id="Output" >
<p class="chatOutputLine">01: erste Zeile</p>
</div>

</body>
</html>
[/html]
auf dieser seite soll fuer alles, was oben ins textfeld eingegeben wird, neue elemente in <div id="Output" erstellt werden. Dies funktioniert auch mit folgendem JS-Code, aber nicht so, wie gewuenscht.
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var messageId = 1;

function AddMessage () {

  var inputLine = document.getElementById('inputLine');
  var output = document.getElementById('Output');

  var newLine = document.createElement("p");
  newLine.setAttribute("class","chatOutputLine");

  var text = document.createTextNode(messageId + ": " + inputLine.value);

  output.appendChild( newLine.appendChild(text) );

  alert('Printed: ' + inputLine.value);
  inputLine.focus();
  inputLine.value = '';

  messageId++;
  return false;
} // AddMessage

da wird dann auch was ausgegeben, jedoch nicht so, wie ich's will. Da wird anscheinend kein <p>...</p> erzeugt, sondern nur auf die Seite geschrieben (bei IE6 oder dem neuesten Firefox), also z.B.
Code: (dl )
1: dfgh2: dfh3: zeile 34: vierte zeile5: fuenfte zeile

wie kann ich da stattdessen ausgeben:
Code: (dl )
1
2
3
4
5
1: dfgh
2: dfh
3: zeile 3
4: vierte zeile
5: fuenfte zeile


chat.css sieht uebrigens folgendermaszen aus:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
.chatOutputLine {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    background-color: #FFFF66;
    letter-spacing: normal;
    text-align: left;
    word-spacing: normal;
    white-space: normal;
    margin: 1px;
    border: medium solid #0000FF;
}
perl -le "s::*erlco'unaty.'.dk':e,y;*kn:ai;penmic;;print"
http://www.fabiani.net/
Dubu
 2006-05-14 03:52
#24765 #24765
User since
2003-08-04
2145 Artikel
ModeratorIn + EditorIn

user image
[quote=Strat,13.05.2006, 22:00]
Code: (dl )
  output.appendChild( newLine.appendChild(text) );
[/quote]
Du kannst die beiden Aufrufe nicht so zusammenfassen. Das appendChild() liefert das Kindelement zurück, nicht das Elternelement. Daher wird mit dieser Zeile direkt das Objekt "text" und nicht das Objekt "newLine" in das Objekt "output" eingefügt.

Korrekt:
Code: (dl )
1
2
  newLine.appendChild(text);
  output.appendChild(newLine);

Dann klappt's auch mit dem <p>.

HTH
Strat
 2006-05-14 15:54
#24766 #24766
User since
2003-08-04
5246 Artikel
ModeratorIn
[Homepage] [default_avatar]
danke, das funktioniert, die <p> werden jetzt ordnungsgemaess eingefuegt.
Bei Firefox funktioniert sogar das zuweisen der class="chatOutputLine", aber bei IE6 funktioniert's nicht; da wird class einfach ignoriert. Wenn ich className verwende, funktioniert's im IE, nicht aber in Firefox... also beides...
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var messageId = 1;

function AddMessage () {
  var inputLine = document.getElementById('inputLine');
  var output = document.getElementById('Output');

  var newLine = document.createElement("p");
  var text    = document.createTextNode(messageId + ": " + inputLine.value);

  newLine.setAttribute("class",     "chatOutputLine");  // for Firefox
  newLine.setAttribute("className", "chatOutputLine"); // for IE

  newLine.appendChild(text); 
  output.appendChild(newLine);

  alert('Printed: ' + inputLine.value);

  inputLine.focus();
  inputLine.value = '';

  messageId++;
  return false;
} // AddMessage

muss ich mal recherchieren, was da fuer opera und weitere browser noetig ist...
perl -le "s::*erlco'unaty.'.dk':e,y;*kn:ai;penmic;;print"
http://www.fabiani.net/
Strat
 2006-05-14 21:44
#24767 #24767
User since
2003-08-04
5246 Artikel
ModeratorIn
[Homepage] [default_avatar]
wenn's jemanden interessiert, bisher funktioniert schon folgendes:
chat.html:
[html]
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chattest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="chat.css" rel="stylesheet" type="text/css" />
<script src="chat.js" type="text/javascript"></script>
</head>

<body>

<div class="chatwindow" id="chatwindow">
<div id="Output">
<p class="chatOutputLine">01: erste Zeile</p>
</div>

<form class="inputform" name="SendForm" action="" method="post" onsubmit="return AddMessage()">
<input type="text" id="inputLine" value="" size="30" />
<input type="submit" name="sendButton" value="Send" />
</form>
</div>

</body>
</html>
[/html]
chat.css:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.chatwindow {
    height: auto;
    width: 300px;
    border: 2px solid c
}
.chatOutputLine {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    background-color: #FFFF66;
    letter-spacing: normal;
    text-align: left;
    word-spacing: normal;
    white-space: normal;
    margin: 1px;
    border: 1px solid #0000FF;
}
.inputform {
    background-color: c
    border: 1px solid #FFFF66;
    padding: 2px;
    margin: 1px;
}

chat.js
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
function AddMessage () {
  var inputLine = getInputLine();

  var req = getXMLhttpRequestObject();
  req.open("GET", "/cgi-bin/chat4.cgi?message=" + inputLine.value, null);
  req.send(null);

  parseMessageReply(req.responseText);

  inputLine.value = ''; setInputFocus();

  return false;
} // AddMessage
// --------------------------------------------------------
// private subs
// --------------------------------------------------------
function parseMessageReply (rText) {
   var list = rText.split("\n");
   for (var i=0; i<list.length; i++) {
     if (list[i] != '') {
       var line = list[i].split("\t");
       writeLine(line[0] + ": " + line[1] + ': ' + line[2]);
     }
   }

} // parseMessageReply
// --------------------------------------------------------
function getInputLine () {
  return ( document.getElementById('inputLine') );
//  return (inputLine);
} // getInputLine
// --------------------------------------------------------
function setInputFocus () {
   var inputLine = getInputLine(); inputLine.focus();
} // SetInputFocus
// --------------------------------------------------------
function writeLine (line, widget) {

  // get output widget    
  widget            = widget || 'Output';
  var outputWidget  = document.getElementById(widget);

  // create a new p containing the text
  var newLine = document.createElement("p");
  var text    = document.createTextNode(line);

  // set class="chatOutputLine"
  newLine.setAttribute("class",     "chatOutputLine"); // for Firefox
  newLine.setAttribute("className", "chatOutputLine"); // for IE

  // and append it to the tree (=write)
  newLine.appendChild(text); 
  outputWidget.appendChild(newLine);
} // writeLine
// --------------------------------------------------------
function getXMLhttpRequestObject () {
  var ret
  
  // for MS Internet explorer
  var msxml = [
    "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "Msxml2.XMLHTTP.3.0",
    "Msxml2.XMLHTTP", "Microsoft.XMLHTTP" ];
  
  if (window.ActiveXObject) {
    for (var i=0; i<msxml.length; i++) {
      try {
        ret = new ActiveXObject(msxml[i]);
        break;
      } catch(e) {}
    } // for
  } // if

  // for firefox and mozilla
  ret = ret ? ret : new XMLHttpRequest();

  return ret
} // getXMLhttpRequestObject
// --------------------------------------------------------

und cgi-bin/chat4.cgi
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#! /usr/bin/perl
use warnings;
use strict;
use POSIX;
use CGI ();

my $cgi    = CGI->new();

print $cgi->header(-expires => "+1s");
my $nick = "Nickname";
print join("\t", &TS(), $nick, $cgi->param('message') ), "\n";
print join("\t", &TS(), $nick, $cgi->param('message') ), "\n";

# ------------------------------------------------------------
sub TS {
    return POSIX::strftime("%H:%M:%S ", localtime(time));
} # GetTimeStamp
# ------------------------------------------------------------


mit sich selbst kann man schon wunderbar chatten
perl -le "s::*erlco'unaty.'.dk':e,y;*kn:ai;penmic;;print"
http://www.fabiani.net/
GwenDragon
 2006-05-14 22:15
#24768 #24768
User since
2005-01-17
14554 Artikel
Admin1
[Homepage]
user image
ich muss dich enttäuschen.

Opera 9 geht nicht.
die Drachin, Gwendolyn

Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel
GwenDragon
 2006-05-14 22:35
#24769 #24769
User since
2005-01-17
14554 Artikel
Admin1
[Homepage]
user image
Fehlt da nicht irgendwo
Code: (dl )
(receiveReq.readyState == 4 || receiveReq.readyState == 0)
um zu testen, ob der Request hingehauen hat?
die Drachin, Gwendolyn

Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel
Strat
 2006-05-14 23:27
#24770 #24770
User since
2003-08-04
5246 Artikel
ModeratorIn
[Homepage] [default_avatar]
schade

ja, sowas fehlt eigentlich noch, aber dafuer muss ich noch ein wenig doku lesen, weil ich noch nicht ganz verstehe, wieso folgendes bei mir nicht funzt.
Code: (dl )
1
2
3
4
5
6
7
req.onreadystatechange = function () {
  if (req.readyState == 4) {
    if (req.status == 200) {
      parseMessageReply(req.responseText);
    }
  }
}
perl -le "s::*erlco'unaty.'.dk':e,y;*kn:ai;penmic;;print"
http://www.fabiani.net/
<< >> 7 Einträge, 1 Seite



View all threads created 2006-05-14 00:00.