/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] DOM Newby Needs Assistance

I’m trying to write a code that:
1. Takes the text entered into a texarea
2. Creates a div to stick that text into
3. Assigns that div a specific ID
4. And finally writes the div within another specific div

Unfortunately, my DOM commands are a mess and I need a quick lesson.

[code=html]
<html>
<head>
<script type=”text/javascript”>
function testreadtext()
{
var txtval = document.getElementsByTagName(‘textarea’)[0].value;
var msgtxt = document.createTextNode(txtval);
var msgdiv = document.createElement(‘div’);
var msgfil = msgdiv.appendChild(msgtxt);
var msgchg = msgfil.setAttribute(‘id’,’fsmsg’);
var msgbox = document.getElementById(‘msgs’);
msgbox.appendChild(msgchg);
}
</script>
</head>
<body>
<div id=”msgs”></div>
<textarea></textarea>
<input type=”submit” onclick=”testreadtext();” />
</body>
</html>
[/code]

to post a comment
JavaScript

9 Comments(s)

Copy linkTweet thisAlerts:
@mrhooApr 03.2008 — var msgchg = msgfil.setAttribute('id','fsmsg');

msgbox.appendChild(msgchg);[/QUOTE]


You are changing your object (the div) to a string, the return value of setAttribute.

appendChild needs an element argument.
Copy linkTweet thisAlerts:
@okendozeauthorApr 03.2008 — So how can I rewrite my script for my purpose? I don't know what to do.
Copy linkTweet thisAlerts:
@okendozeauthorApr 03.2008 — I tried:

[code=php]<script type="text/javascript">
function testreadtext()
{
var txtval = document.getElementsByTagName('textarea')[0].value;
var msgtxt = document.createTextNode(txtval);
var msgdiv = document.createElement('div');
var msgfil = msgdiv.appendChild(msgtxt);
msgfil.setAttribute('id','fsmsg');
var msgbox = document.getElementById('msgs');
msgbox.appendChild(msgchg);
}
</script>[/code]


But that did not work. It actually did not produce an error in IE, but it did not function the way I want it to.
Copy linkTweet thisAlerts:
@Declan1991Apr 03.2008 — [code=php]<script type="text/javascript">
function testreadtext()
{
var txtval = document.getElementsByTagName('textarea')[0].value;
var msgtxt = document.createTextNode(txtval);
var msgdiv = document.createElement('div');
var msgdiv = msgdiv.appendChild(msgtxt);
msgdiv.id = "fsmsg";
var msgbox = document.getElementById('msgs');
msgbox.appendChild(msgdiv);
}
</script> [/code]

I was just wondering did you intend something else, particularly with the following lines?[code=php]
var msgfil = msgdiv.appendChild(msgtxt);
msgfil.setAttribute('id','fsmsg'); [/code]
And although I haven't tested it, I think this will work too.[code=php]<script type="text/javascript">
function testreadtext()
{
var txtval = document.getElementsByTagName('textarea')[0].value;
var msgtxt = document.createTextNode(txtval);
var msgdiv = document.createElement('div');
var msgdiv = msgdiv.appendChild(msgtxt);
msgdiv.setAttribute("id","fsmsg");
var msgbox = document.getElementById('msgs');
msgbox.appendChild(msgdiv);
}
</script> [/code]
Copy linkTweet thisAlerts:
@okendozeauthorApr 03.2008 — I will try your solution soon.

I was just wondering did you intend something else, particularly with the following lines?[/QUOTE]

I don't understand your question. The first of those two lines was supposed to set the text within the new div. The second line is supposed to give the new div the ID "fsmsg" for style purposes.
Copy linkTweet thisAlerts:
@okendozeauthorApr 03.2008 — Yours did not work either. Thanks for the attempt.
Copy linkTweet thisAlerts:
@Declan1991Apr 03.2008 — Sorry, I forgot to test in IE.[code=php]
<script type="text/javascript">
function testreadtext()
{
var txtval = document.getElementsByTagName('textarea')[0].value;
var msgtxt = document.createTextNode(txtval);
var msgdiv = document.createElement('div');
msgdiv.appendChild(msgtxt);
msgdiv.id = "fsmsg";
var msgbox = document.getElementById('msgs');
msgbox.appendChild(msgdiv);
}
</script>[/code]
Works this time for sure!
Copy linkTweet thisAlerts:
@okendozeauthorApr 03.2008 — Awesome. Could explain why you made the changes that you did?
Copy linkTweet thisAlerts:
@Declan1991Apr 03.2008 — The difference was changing:[code=php]
var msgdiv = msgdiv.appendChild(msgtxt);
[/code]
to [code=php]
msgdiv.appendChild(msgtxt);
[/code]

The former assigned the result of the appendChild function to a new variable called msgdiv. Now, there was already such a variable, and I don't really know what happens in that case. My guess is that in Firefox, appendChild returns the element, and in IE it doesn't.

If that was too complicated, I try to explain it more. I presume you are used to strings, which are immutable, and cannot be changed. That means that when you preform a function on them:[code=php]
var newString = "Old String".replace("Old","new");
[/code]

you have to call it a new variable, because "Old String" is never modified, and cannot be. But, HTML elements are not like that, and appendChild actually modifies the variable msgdiv. Because that is the case, we do not have to assign it to a new variable.

If that makes no sense, say so, and I will try again. But it does show the importance of making you code as correct as possible, and also the importance of cross-browser testing.
×

Success!

Help @okendoze spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...