A
ahtapot
Hello All,
I'm trying to do something relly simple like taking an input from a
text field, and appending it to the bottom of an unordered list I have.
However as soon as I append, the text disappears. I want it to be a
part of the document and to always show whenever my page is loaded. How
can I do that? I must be missing something really basic. Can anyone
help? My code is below.
Thanks!
aht.
<html><head><title>append list element</title> </head><body>
<form name = "form1">
<input type = "submit" name = "button1" onclick = "add();"/>
<input type = "textfield" name ="entry" />
<ul id = "list1">
<li> blah1
<li> blah2
</ul></form>
<script language = "javascript">
function add() {
var frm = document.forms["form1"];
var x = frm.entry.value;
alert(x);
var z = document.createElement("li");
var text1 = document.createTextNode(x);
z.appendChild(text1);
document.getElementById('list1').appendChild(z);
}
</script></body></html>
I'm trying to do something relly simple like taking an input from a
text field, and appending it to the bottom of an unordered list I have.
However as soon as I append, the text disappears. I want it to be a
part of the document and to always show whenever my page is loaded. How
can I do that? I must be missing something really basic. Can anyone
help? My code is below.
Thanks!
aht.
<html><head><title>append list element</title> </head><body>
<form name = "form1">
<input type = "submit" name = "button1" onclick = "add();"/>
<input type = "textfield" name ="entry" />
<ul id = "list1">
<li> blah1
<li> blah2
</ul></form>
<script language = "javascript">
function add() {
var frm = document.forms["form1"];
var x = frm.entry.value;
alert(x);
var z = document.createElement("li");
var text1 = document.createTextNode(x);
z.appendChild(text1);
document.getElementById('list1').appendChild(z);
}
</script></body></html>