动态添加的项目不会附加到列表中
我正在尝试根据输入值附加一个列表项。但是，不会附加列表项。我试图在不同的地方使用脚本标签，但这没有帮助。我错过了什么？
这是我的 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);
}
哆啦的时光机浏览 117回答 4
4回答
-
海绵宝宝撒
您需要使用createElement函数来创建您li的待办事项items。然后在上面使用 appendChild - 也可以考虑使用addEventListener我还添加了clearAll按钮的功能。items这将使您从列表中清除所有要做的事情。此外，由于您form在 HTML 中使用 a ，这意味着默认行为是它将重新加载页面。要阻止这种情况发生，请使用preventDefault方法。现场演示：var list = document.getElementById("myList")//Add to do'sdocument.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 alldocument.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> -
不负相思意
试试这个简单的解决方案...myList.innerHTML+='<li>'+newtodo.value+'</li>'; -
富国沪深
拳头按钮类型不应该是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
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>
随时随地看视频慕课网APP
相关分类
JavaScript