如何使用JavaScript中的事件偵聽器回傳更改時HTML串列元素的數量？-有解無憂

我的待辦事項串列會附加以串列中元素數開頭的每個輸入值。因此，輸入第一項“做作業”輸出為“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;
}

uj5u.com熱心網友回復：

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

正如@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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/493761.html

標籤：javascript

上一篇：打字稿匯入/匯出

下一篇：盡管路由作業，但在nanoFrameworkWebserver示例中未呼叫控制器建構式