我正在尝试根据输入值附加一个列表项。但是，不会附加列表项。我试图在不同的地方使用脚本标签，但这没有帮助。我错过了什么？这是我的 HTML<body><main> <div> <form> <input type="text" name="newtodo" id="newtodo" placeholder="New Todo..."> <button type="submit" id="addtodo">+</button> </form> <div class="AddedTodo"> <ul id="myList"> </ul> </div> <div> <p id="clearAll">Clear All</p> </div> </div></main></body><script type="text/javascript" src="script.js"></script>这是我的 JavaScript。document.getElementById("addtodo").onclick = function addItem() { var ul = document.getElementById("newtodo").value; var li = "<li>" + ul + "</li>"; document.getElementById("myList").appendChild(li);}
4 回答
海绵宝宝撒
TA贡献1809条经验 获得超8个赞
您需要使用createElement函数来创建您li的待办事项items。然后在上面使用 appendChild - 也可以考虑使用addEventListener
我还添加了clearAll按钮的功能。items这将使您从列表中清除所有要做的事情。
此外，由于您form在 HTML 中使用 a ，这意味着默认行为是它将重新加载页面。要阻止这种情况发生，请使用preventDefault方法。
现场演示：
var list = document.getElementById("myList")
//Add to do's
document.getElementById("addtodo").addEventListener('click', function(e) {
e.preventDefault()
var inputValue = document.getElementById("newtodo");
var li = document.createElement('li')
li.textContent = inputValue.value
list.appendChild(li)
inputValue.value = ''
}, false);
//Clear all
document.getElementById("clearAll").addEventListener('click', function(e) {
e.preventDefault()
list.innerHTML = ''
}, false);
<body>
<main>
<div>
<form>
<input type="text" name="newtodo" id="newtodo" placeholder="New Todo...">
<button type="submit" id="addtodo">+</button>
</form>
<div class="AddedTodo">
<ul id="myList">
</ul>
</div>
<div>
<button id="clearAll">Clear All</button>
</div>
</div>
</main>
</body>
富国沪深
TA贡献1790条经验 获得超9个赞
拳头按钮类型不应该是submit它应该是type="button"并且易于使用innerHTML。
<body>
<main>
<div>
<form>
<input type="text" name="newtodo" id="newtodo" placeholder="New Todo...">
<button type="button" id="addtodo">+</button>
</form>
<div class="AddedTodo">
<ul id="myList">
</ul>
</div>
<div>
<p id="clearAll">Clear All</p>
</div>
</div>
</main>
</body>
<script type="text/javascript" src="script.js"></script>
document.getElementById("addtodo").onclick = function addItem() {
const newtodo = document.getElementById("newtodo").value;
const myList = document.getElementById("myList");
myList.innerHTML += '<li>' + newtodo + '</li>';
}
qq_花开花谢_0
TA贡献1835条经验 获得超6个赞
SO 上有很多待办事项列表示例代码...
像这样一个：How do I append more than one child element to a parent element Javascript
你错过了任何形式提交=>发送数据并加载新页面（这里它重新定位同一页面）
你的按钮是提交，所以你必须跟踪提交事件，而不是按钮的点击事件......
const myForm = document.getElementById('my-form')
, myList = document.getElementById('my-list')
;
myForm.onsubmit=e=>
{
e.preventDefault() // stop the form submit ( don't let him sending data to server, don't let a page quit and loading the same one)
let todoText = myForm.newtodo.value.trim() // get the todo value without spaces before / after
if (todoText!=='')
{
let liTodo = document.createElement('li')
liTodo.textContent = todoText
myList.appendChild(liTodo)
myForm.newtodo.value = '' // cleaner
}
}
<form id="my-form">
<input type="text" name="newtodo" placeholder="New Todo...">
<button type="submit" >+</button>
</form>
<br>
<ul id="my-list"></ul>
添加回答
举报
0/150
提交
取消