1

I have a textbox for user input with a submit button. I would like for the user to be able to put in some input, and have the input appear in a list underneath the input box, maybe into a table using some kind of javascript function. To me this seems like a fairly simple concept but I can't find any tutorials that will show me how to do it, can anyone recommend any or tell me what the best, most attractive looking approach to this would be?

EDIT- Here's what I've tried:

<html>
<head>

</head>
<body>



<script type="text/javascript">

document.getElementById("add").onClick = function() {

    var text = document.getElementById("idea").value;

    var li = "<li>" + text + </li>;

    document.getElementById("list").appendChild(li);
}

</script>

<input type='text' id = 'idea' />
<input type='button' value = 'add to list' id = 'add'>

<ul id= 'list'> 


  <li> <b>Topics</b></li> 

    </ul>



</body>
</html>
4

5 回答 5

4

I can give a quick run through of what you'll need. First, you'll want your basic text input with an ID:

<input type='text' id='idea' />

And obviously a button to add to the list:

<input type='button' value='add to list' id='add' />

And a list to be adding to:

<ul id='list'></ul>

Now for the fun JS, see the play-by-play in the comments

//Defining a listener for our button, specifically, an onclick handler
document.getElementById("add").onclick = function() {
    //First things first, we need our text:
    var text = document.getElementById("idea").value; //.value gets input values

    //Now construct a quick list element
    var li = "<li>" + text + "</li>";

    //Now use appendChild and add it to the list!
    document.getElementById("list").appendChild(li);
}
于 2013-11-11T14:07:34.830 回答
3

Below is the basic JavaScript code that will do the job.

document.getElementById("add").onclick  = function() {

    var node = document.createElement("Li");
    var text = document.getElementById("user_input").value; 
    var textnode=document.createTextNode(text);
    node.appendChild(textnode);
    document.getElementById("list_item").appendChild(node);
}

HTML

<input type="button" id="add" value="Add New">
<ol id="list_item">

</ol>
于 2017-01-04T11:00:14.043 回答
1

here is a basic jquery implementation:

(function($){
    $('#myform').submit(function(e){
        var val = $('#in').val();
        $('ul.list').append('<li>' + val + '</li>');
        e.preventDefault();
    });
})(jQuery);

http://jsfiddle.net/MW8HS/

于 2013-11-11T14:16:20.270 回答
0 
<input type='text' id='idea'>
<input type="button" id="add" value="Add New">
<script>document.getElementById("add").onclick  = function() {

    var node = document.createElement("Li");
    var text = document.getElementById("idea").value; 
    var textnode=document.createTextNode(text);
    node.appendChild(textnode);
    document.getElementById("list").appendChild(node);
}
</script>
<ul id='list'></ul>
于 2019-12-14T07:02:14.447 回答
-1

I think it work but not changing li style: 

document.getElementById('add').onclick = function(){
  var text = document.getElementById('idea').value;     
  var node = document.createElement("li");    
  var textNode = document.createTextNode(text);    
  node.appendChild(textNode);     
  document.getElementById('list').appendChild(node);
};
于 2017-03-22T11:42:39.937 回答