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

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

1 голос
/ 03 апреля 2019

Использование 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];
        }
    }

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

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

1 Ответ

0 голосов
/ 03 апреля 2019

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

  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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...