将用户输入添加到html页面上的文本项列表 [英] adding user input to a list of text items on a html page
问题描述
我有一个用户输入的文本框，带有提交按钮。我希望用户能够输入一些输入，并将输入显示在输入框下面的列表中，也可以使用某种javascript函数进入表格。对我而言，这似乎是一个相当简单的概念，但我找不到任何教程可以告诉我如何做，任何人都可以推荐任何或者告诉我什么是最好的，最有吸引力的方法呢？
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>
推荐答案
我可以快速浏览你的内容我需要。首先，您需要使用ID输入基本文本：
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>
现在有趣的JS，请参阅评论中的逐个播放
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);
}
这篇关于将用户输入添加到html页面上的文本项列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
