首頁猿問動態添加的項目不會附加到列表中

動態添加的項目不會附加到列表中

JavaScript

哆啦的時光機 2023-01-06 11:05:19

我正在嘗試根據輸入值附加一個列表項。但是，不會附加列表項。我試圖在不同的地方使用腳本標簽，但這沒有幫助。我錯過了什么？這是我的 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>

</form>

</ul>

</div>

<div>

<button id="clearAll">Clear All</button>

</div>

</main>

</body>

反對回復 2023-01-06

不負相思意

TA貢獻1777條經驗獲得超10個贊

試試這個簡單的解決方案...

myList.innerHTML+='<li>'+newtodo.value+'</li>';

反對回復 2023-01-06

富國滬深

TA貢獻1790條經驗獲得超9個贊

拳頭按鈕類型不應該是submit它應該是type="button"并且易于使用innerHTML。

<body>

<main>

<div>

<form>

</form>

</ul>

</div>

<div>

<p id="clearAll">Clear All</p>

</div>

</main>

</body>

document.getElementById("addtodo").onclick = function addItem() {

const newtodo = document.getElementById("newtodo").value;

const myList = document.getElementById("myList");

myList.innerHTML += '<li>' + newtodo + '</li>';

}

反對回復 2023-01-06

qq_花開花謝_0

TA貢獻1835條經驗獲得超7個贊

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>

<br>

反對回復 2023-01-06

4 回答
0 關注
192 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

動態添加的項目不會附加到列表中

動態添加的項目不會附加到列表中

4 回答

添加回答