Блог

Главная - Вопросы по программированию - Где и как добавить счетчик и использовать его для увеличения внутреннего текста добавленных элементов списка — DOM

Где и как добавить счетчик и использовать его для увеличения внутреннего текста добавленных элементов списка — DOM

#javascript #for-loop #dom

#javascript #для цикла #dom

Вопрос:

Использование DOM — Кнопка будет добавлять элементы в список при нажатии, но также необходимо увеличить целое число внутреннего текста [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];
        }
    }

Я хочу, чтобы внутренний текст (‘Это элемент списка’ [i]) увеличивался на 1 при каждом нажатии кнопки.

На данный момент мой код функционирует, но [i] не увеличивается; он остается равным ‘1’ при каждом нажатии / добавлении.

Ответ №1:

У вас есть несколько проблем:

  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>