堆棧內存溢出
  簡體   English   中英

如何使用 JavaScript 中的事件偵聽器返回更改時 HTML 列表元素的數量？

[英]How to return the number of HTML list elements on change using an event listener in JavaScript?

 原文  2022-06-20 19:58:25  9   1    javascript

問題描述

我的待辦事項列表會附加以列表中元素數開頭的每個輸入值。 因此，輸入第一項“做作業”輸出為“1. 做作業”。 第二個輸入“Learn JS”輸出為“2. Learn JS”。 但是，當刪除列表中間的元素時，與該項目相鄰的數字不會根據當前列表元素的數量進行調整。

例如，如果輸出是：


1.做功課
2.學習JS
3.練習鋼琴

刪除數字 2 將返回：


1.做功課
3.練習鋼琴

而不是正確的輸出：


1.做功課
2.練習鋼琴

 var listset = document.querySelector('#add').addEventListener('click', newItem); function newItem() { var lilist = document.getElementById("listForm").getElementsByTagName("li") var largo = lilist.length + 1 var node = document.createElement('li'); var inputValue = document.getElementById('input').value const delButton = document.createElement('img') delButton.src = "https://www.upload.ee/image/14249875/delete-button.jpg" delButton.width = 15; delButton.height = 15; delButton.addEventListener('click', function(e){ e.target.closest('li').remove() }) var textNode = document.createTextNode(largo +'. '+ inputValue + " "); node.appendChild(textNode) if (inputValue !== '') { var item = document.getElementById('listForm').appendChild(node); item.appendChild(delButton) document.getElementById('input').value = ''; } }
 h1 { font-family: 'Courier New', Courier, monospace; font-size: 35px; text-align: center; } .header2 { font-family: Arial, Helvetica, sans-serif; text-align: center; font-size: 18px; } .main-page { margin-top: 150px; margin-left: auto; margin-right: auto; width: 50%; } ul { list-style-type: none; margin-top: 150px; margin-left: 50px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; } li { margin-top: 10px; } .list { font-family: Arial, Helvetica, sans-serif; font-size: 18px; margin-left: 100px; padding: 10px 10px; width: 40%; margin-bottom: -151px; } #input { font-size: 18px; } #add { background-color: rgb(233, 235, 235); font-size: 18px; margin-left: -3px; } #listForm { color: black; margin-left: 100px; width: 284px; } li { margin-bottom: -5px; } li:hover { cursor: grab; color: rgb(176, 171, 171) } #listForm .checked { text-decoration: line-through; } .unchecked { text-decoration: none; }
 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>To Do List: Raamis Ali</title> <meta name="description" content="A todo list application"> <meta name="author" content="Raamis Ali"> <link rel="stylesheet" href="list.css"> </head> <body> <script src="javascript.js"></script> <div class="main-page"> <h1>To Do List Web App</h1> <p class="header2">Created by Raamis Ali</p> <div class="list"> <input type="text" id="input" placeholder="Add items"> <input type="button" value="Add" id="add" onclick="newItem()"> </div> <ul id="listForm"> </ul> <br> </div> </body> </html>

我已經嘗試用不同的變體來實現這個事件監聽器和函數，但我沒有成功：

largo.addEventListener('change', updateValue())
function updateValue(e) {
var lilist = document.getElementById("listForm").getElementsByTagName("li")
lilist.length + 1 == e.target.value;
}

1 個解決方案

解決方案1
 1 已采納  2022-06-20 20:10:52

肯定數字不會改變，因為您沒有使用新的數值重新初始化列表文本。

正如@Barmar 建議的那樣，最好使用“ol”元素而不是“ul”，這將輸出列表的正確數字順序。 

 var listset = document.querySelector('#add').addEventListener('click', newItem); function newItem() { var lilist = document.getElementById("listForm").getElementsByTagName("li") var node = document.createElement('li'); var inputValue = document.getElementById('input').value const delButton = document.createElement('img') delButton.src = "https://www.upload.ee/image/14249875/delete-button.jpg" delButton.width = 15; delButton.height = 15; delButton.addEventListener('click', function(e){ e.target.closest('li').remove() }) var textNode = document.createTextNode(inputValue + " "); node.appendChild(textNode) if (inputValue !== '') { var item = document.getElementById('listForm').appendChild(node); item.appendChild(delButton) document.getElementById('input').value = ''; } }
 h1 { font-family: 'Courier New', Courier, monospace; font-size: 35px; text-align: center; } .header2 { font-family: Arial, Helvetica, sans-serif; text-align: center; font-size: 18px; } .main-page { margin-top: 150px; margin-left: auto; margin-right: auto; width: 50%; } ol { margin-top: 150px; margin-left: 50px; font-family: Arial, Helvetica, sans-serif; font-size: 18px; } li { margin-top: 10px; } .list { font-family: Arial, Helvetica, sans-serif; font-size: 18px; margin-left: 100px; padding: 10px 10px; width: 40%; margin-bottom: -151px; } #input { font-size: 18px; } #add { background-color: rgb(233, 235, 235); font-size: 18px; margin-left: -3px; } #listForm { color: black; margin-left: 100px; width: 284px; } li { margin-bottom: -5px; } li:hover { cursor: grab; color: rgb(176, 171, 171) } #listForm .checked { text-decoration: line-through; } .unchecked { text-decoration: none; }
 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>To Do List: Raamis Ali</title> <meta name="description" content="A todo list application"> <meta name="author" content="Raamis Ali"> <link rel="stylesheet" href="list.css"> </head> <body> <script src="javascript.js"></script> <div class="main-page"> <h1>To Do List Web App</h1> <p class="header2">Created by Raamis Ali</p> <div class="list"> <input type="text" id="input" placeholder="Add items"> <input type="button" value="Add" id="add" onclick="newItem()"> </div> <ol id="listForm"> </ol> <br> </div> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML 元素列表上的事件偵聽器 javascript在事件監聽器中更改html 如何使用事件監聽器使用JavaScript更改背景 如何更改 javascript 事件偵聽器？ 使用 JavaScript 更改事件偵聽器對產品列表進行排序 如何使用JavaScript更改HTML中元素的順序 一種 Javascript 腳本算法，用於計算 Html 上的鼠標點擊次數<button>。</button> <button>使用事件監聽器</button> 如何使用事件偵聽器向對象數組添加新元素並將其顯示在 html 頁面上 如何使用事件偵聽器將新元素添加到對象數組並在html頁面上顯示它（已編輯的代碼） 如何使用on（&#39;change&#39;）將事件偵聽器綁定到<script>'s have run?
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM