gpt4 book ai didi

javascript - 将用户输入添加到 html 页面上的文本项列表

转载 作者:行者123 更新时间:2023-11-28 04:57:53 24 4
gpt4 key购买 nike

我有一个带有提交按钮的用户输入文本框。我希望用户能够输入一些内容,并将输入内容显示在输入框下方的列表中,也许使用某种 javascript 函数将其显示在表格中。对我来说,这似乎是一个相当简单的概念,但我找不到任何教程可以告诉我如何去做,任何人都可以推荐任何教程或告诉我最好、最吸引人的方法是什么?

编辑 - 这是我尝试过的:

<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 的基本文本输入:

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

显然还有一个添加到列表的按钮:

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

以及要添加到的列表:

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

现在为了有趣的 JS,请在评论中逐个播放

//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);
}

关于javascript - 将用户输入添加到 html 页面上的文本项列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19908215/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com