时间戳

首页 > 解决方案 > 在哪里以及如何添加计数器并使用它来增加附加列表项的内部文本 - DOM

javascript - 在哪里以及如何添加计数器并使用它来增加附加列表项的内部文本 - DOM

问题描述

使用 DOM - 单击该按钮会将项目附加到列表中，但它还需要增加每个附加列表项的 innerText 整数 [i]。我不知道如何使它增加。

我尝试在函数 insertItem() 和 button.addEventListener 中添加一个计数器，但没有成功。计数器示例：

let clickCount = 0;
clickCount++:

HTML

<body>
    <button class='button'>Click to add new list item</button>

</body>

JavaScript

let button = document.querySelector('button');
    document.body.appendChild(button);
    button.className = 'button';

    button.addEventListener('click', insertItem);
    
    function insertItem() {
        let list = document.createElement('ul');
 
        document.body.appendChild(list);
    
        for (let i = 1; i === 1; i++) {
            let item = document.createElement('li');
            let text = document.createTextNode('This is list item ' + [i]);
                item.appendChild(text);
                list.appendChild(item);
        
                document.getElementsByName('item').innerHTML = 'This is list item ' + [i+1];
        }
    }

我希望 innerText ('This is list item ' + [i]) 在每次单击按钮时增加 1。

截至目前，我的代码功能但 [i] 没有增加；每次点击/追加时，它都保持为“1”。

标签： javascriptfor-loopdom

解决方案

你有几个问题：

  1. 您的按钮已经是 HTML 的一部分 - 无需在开始时再次附加它。

  2. 您使用 for 循环，但它不会循环，而是只运行一次代码（因此，不需要它）

  3. 您正在创建多个无序列表（ul标签），而您可以在函数之外创建一个，并将项目（li标签）添加到该ul标签中。

解决这些问题后，您可以创建一个名为的全局变量clickCounter并将其用作每个项目末尾的数字。每次将项目添加到列表时，您都可以clickCounter使用clickCounter++. 我已将clickCounter其设为全局，就好像它在您的函数中一样，每次单击您的按钮时它都会重置，这不是您想要的。

请参阅下面的工作示例：

let button = document.querySelector('button.button'); // get the button element with the button class

button.addEventListener('click', insertItem);

let clickCounter = 1;
let list = document.createElement('ul');
document.body.appendChild(list);

function insertItem() {
  let item = document.createElement('li');
  let text = document.createTextNode('This is list item ' + clickCounter);
  item.appendChild(text);
  list.appendChild(item);
  clickCounter++;
}
<button class='button'>Click to add new list item</button>

推荐阅读