Дата публикации: 13.04.2024

Проблема с кнопками в JavaScript: почему не работает добавление и удаление актеров из списка

JavaScript - это мощный инструмент, который позволяет создавать интерактивные элементы на веб-страницах. Однако, иногда могут возникать проблемы с выполнением определенных функций, таких как добавление и удаление элементов из списка. В данной статье мы рассмотрим пример кода, в котором реализованы кнопки для добавления и удаления актеров из списка, и выясним, почему они не работают.

Проблема:

При нажатии на кнопку "Добавить в список" или "Удалить из списка" ничего не происходит. Код JavaScript, который отвечает за обработку событий нажатия на эти кнопки, выглядит следующим образом:

document.getElementById('add-button').addEventListener('click', function() {
    var actor = prompt('Введите имя актера');
    if (actor) {
        var li = document.createElement('li');
    }
});

document.getElementById('remove-button').addEventListener('click', function() {
    var lastActor = document.getElementById('actor-list').lastElementChild;
    if (lastActor) {
        lastActor.remove();
    }
});

Причина:

Ошибки в коде JavaScript могут быть вызваны различными причинами. В данном случае, основная проблема заключается в том, что в коде присутствуют опечатки и неправильные идентификаторы элементов. Например, вместо document.getElementById('actor-list') должно быть document.getElementById('actors-list'), так как идентификатор списка актеров указан как actors-list в HTML.

Решение:

Чтобы исправить проблему с кнопками добавления и удаления актеров из списка, необходимо внести следующие изменения в код JavaScript:

document.getElementById('add-button').addEventListener('click', function() {
    var actor = prompt('Введите имя актера');
    if (actor) {
        var li = document.createElement('li');
        li.textContent = actor;
        document.getElementById('actors-list').appendChild(li);
    }
});

document.getElementById('remove-button').addEventListener('click', function() {
    var lastActor = document.getElementById('actors-list').lastElementChild;
    if (lastActor) {
        lastActor.remove();
    }
});

После внесения этих изменений, кнопки "Добавить в список" и "Удалить из списка" должны корректно выполнять свои функции. Теперь при нажатии на кнопку "Добавить в список" будет появляться диалоговое окно для ввода имени актера, а затем имя актера будет добавлено в список. При нажатии на кнопку "Удалить из списка" будет удаляться последний актер из списка.

Итак, в данной статье мы рассмотрели проблему с кнопками добавления и удаления актеров из списка в JavaScript, выяснили причину и предложили решение этой проблемы. Надеемся, что данная информация будет полезной для вас при работе с JavaScript на ваших веб-страницах.

﻿Проблема с кнопками в JavaScript: почему не работает добавление и удаление актеров из списка

Проблема с кнопками в JavaScript: почему не работает добавление и удаление актеров из списка