我正在创建一个页面，其中包含 id 为“faves”的无序列表、一个 id 为“add”的文本框以及一个 id 为“btnAdd”的按钮。默认情况下，列表包含 3 个元素，但用户应该能够在文本框中输入文本，单击按钮，并且在文本框中输入的任何内容都应添加到列表中。我似乎无法弄清楚如何在单击按钮时将输入的文本显示在列表中。
这是我的 HTML，其中还包括 CSS 和 Javascript:
<html>
<head>
<title>Project 1 Tanner Taylor</title>
<h1>Project 1 Tanner Taylor</title>
<style type="text/css">
#clickMe {
background-color: blue;
border: 2px double black;
font-size: larger;
}
@media (max-width: 299px) {
#faves {
color: red;
}
}
@media (max-width: 500px) and (min-width: 300px) {
#faves {
color: blue;
}
}
@media (min-width: 501px) {
#faves {
display: none;
}
}
</style>
<script type = "text/javascript">
function clickMe() {
document.getElementById("clickMe").innerHTML="Ouch!";
}
</script>
</head>
<body>
<div id="clickMe" onclick="clickMe()">
Click Me!
</div>
<div>
<ul id="faves">
<li>Video Games</li>
<li>Food</li>
<li>Sleeping</li>
</ul>
<input type="text" id="add" size ="50"/>
<input type="button" id="btnAdd" value="Add" onclick=/>
</div>
</body>
</html>
有人愿意为我指明正确的方向吗？
最佳答案
试试这个:
<script>
function addItem(){
var li = document.createElement("LI");
var input = document.getElementById("add");
li.innerHTML = input.value;
input.value = "";
document.getElementById("faves").appendChild(li);
}
</script>
<input type="button" id="btnAdd" value="Add" onclick="addItem()">
关于javascript - 在 Javascript 中按下按钮时将元素添加到列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26069477/