<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>Домашняя библиотека</h2>
<script src="index.js"></script>
</body>
</html>
let button = document.createElement('button');
button.textContent = 'Добавить книгу';
let buttonSearch = document.createElement('button');
buttonSearch.textContent = 'Найти книгу';
document.body.append(button);
document.body.append(buttonSearch);
let arr = [
'Мастер и Маргарита',
'Гарри Поттер',
'Над пропастью во ржи',
'Властелин Колец',
'Дюна',
'Отцы и дети',
];
function renderList(arr) {
const listEL = document.createElement('ul');
for (i = 0; i < arr.length; i++) {
const liEl = document.createElement('li');
liEl.textContent = `${i + 1}) ${arr[i]}`;
listEL.append(liEl);
}
document.body.append(listEL);
}
renderList(arr);
button.onclick = function book() {
let book = prompt('Введите название книги');
if (book === '') {
alert('Название книги не введено!');
}
arr.push(book);
renderList(arr);
};
Пока что добавляется ЕЩЁ ОДИН массив целиком. А как вызвать обновление данных, чтобы не массив целиком добавлялся еще один на страницу, а добавлялся лишь еще один элемент к уже имеющемуся массиву? То есть в изначальном массиве 6 элементов. Как сделать так, чтобы при нажатию на кнопку и добавлению еще одного элемента в массив сделать так, чтобы обновлялся уже имеющийся массив, а не добавлялся еще один новый целиком?
Спасибо за помощь!
