adding user input to a list of text items on a htm

2020-06-28 16:03发布

站内问答 / JavaScript
524 5 4

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>

5条回答
我想做一个坏孩纸
2楼-- · 2020-06-28 16:32

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);
}
查看更多
0人赞 添加讨论(0) 举报
Melony?
3楼-- · 2020-06-28 16:35 
<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>
查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
4楼-- · 2020-06-28 16:40

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/

查看更多
0人赞 添加讨论(0) 举报
疯言疯语
5楼-- · 2020-06-28 16:43

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);
};
查看更多
0人赞 添加讨论(0) 举报
傲
6楼-- · 2020-06-28 16:45

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)