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 на ваших веб-страницах.