我想為我的 TODO 列表項(xiàng)目在 Javascript 中添加Enter 函數(shù)，在其中我可以按 Enter 鍵并且應(yīng)該添加該項(xiàng)目，現(xiàn)在我只能通過添加按鈕添加列表。其次，我想通過提供一些樣式來正確組織 TODO 列表的列表?，F(xiàn)在看起來不太好。現(xiàn)在我的 TODOLIST 項(xiàng)目看起來像這樣https://i.stack.imgur.com/V1j5z.pngvar add = document.getElementById('add');var removeall = document.getElementById('removeall');var list = document.getElementById('list');//remove all buttonremoveall.onclick= function(){ list.innerHTML= '';}//adding a list elementadd.onclick = function(){ addlis(list); document.getElementById('userinput').value= ''; document.getElementById('userinput').focus(); }function addlis(targetUl){ var inputText = document.getElementById('userinput').value; var li = document.createElement('li'); var textNode= document.createTextNode(inputText + ' '); var removeButton= document.createElement('button'); if(inputText !== ''){ removeButton.className= 'btn btn-xs btn-danger'; removeButton.innerHTML= '×'; removeButton.setAttribute('onclick','removeMe(this)'); li.appendChild(textNode); //onebelowanother li.appendChild(removeButton); targetUl.appendChild(li);} else{ alert("Please enter a TODO");}}function removeMe(item){ var p = item.parentElement; p.parentElement.removeChild(p);}body{ font-family: 'EB Garamond', serif; padding: 0; margin: 0; background-color: beige;}h1{ margin: 40px;}#userinput{ width: 350px; height: 35px; display: inline-block;}.btn{ margin: 20px 5px;}.form-control{ margin: 0 auto;}ul{ list-style: none;}
2 回答
慕無忌1623718
TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊
只需將所有inputs 和buttons包裝在form標(biāo)簽內(nèi)，如下所示：
<form id="...">
<input type="text" id="userinput" class="form-control" placeholder="what you need to do" onkeydown="return searchKeyPress(event);">
<button type="submit" class="btn btn-success" id="add">Add a TODO</button>
</form>
并替換它：
add.onclick = function(){...})
和
form = document.getElementBy...
form.addEventListener('submit', function() {...})
還要盡量避免書寫add.onclick和使用addEventListener。這樣您就可以擁有多個(gè)偵聽器，輕松刪除它們，并且總體上擁有更多控制權(quán)。
幕布斯7119047
TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊
使用事件監(jiān)聽器來監(jiān)聽輸入中的按鍵（13 是回車鍵）：
var input = document.getElementById("userinput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
searchKeyPress(event);
}
});
- 2 回答
- 0 關(guān)注
- 130 瀏覽
添加回答
舉報(bào)
0/150
提交
取消