Задать вопрос
@Meshrrr

Как сделать Изменение/замену списка JavaScript?

Из prompt в массив попадает новое значение, однако вместо добавления пункта в список, на страницу добавляется второй список с новым элементом, не понимаю как убрать старый список, чтобы он просто заменялся. Пробовал по разному, через .innerHTML тоже.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="main.js"></script>
</html>


let list = ["Мастер и Маргарита", "Гарри Поттер", "За пропастью во лжи", "Властелин колец", "Дюна", "Отцы и дети"]

const Header = document.createElement('h1');
Header.textContent = 'Домашняя библиотека'
document.body.append(Header)

const Addbutton = document.createElement('button');
Addbutton.textContent = 'Добавить книгу'
document.body.append(Addbutton)

const Searchbutton = document.createElement('button');
Searchbutton.textContent = 'Найти'
document.body.append(Searchbutton)


 function newlist() { 
    const ulEl = document.createElement('ol'); 

    for (let i = 0; i < list.length; i++) {
   const liEl = document.createElement('li'); 
   liEl.textContent = `${list[i]}`
   ulEl.append(liEl)
    }
    document.body.append(ulEl) 
}
newlist(list)
function Adding() {
    list.push(prompt('Введите название книги'))
    
    newlist()
 }
 
 Addbutton.onclick = Adding

67584cffb582e041470955.png
  • Вопрос задан
  • 91 просмотр
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
@leeroyjenkins176
let ulEl
let list = ["Мастер и Маргарита", "Гарри Поттер", "За пропастью во лжи", "Властелин колец", "Дюна", "Отцы и дети"]

const Header = document.createElement('h1');
Header.textContent = 'Домашняя библиотека'
document.body.append(Header)

const Addbutton = document.createElement('button');
Addbutton.textContent = 'Добавить книгу'
document.body.append(Addbutton)

const Searchbutton = document.createElement('button');
Searchbutton.textContent = 'Найти'
document.body.append(Searchbutton)

function newlist() {
  ulEl = document.createElement('ol');
  document.body.append(ulEl)
  updateList()
}

function updateList() {
  ulEl.innerHTML = list.map(v => `<li>${v}</li>`).join('')
}

function Adding() {
  list.push(prompt('Введите название книги'))
  updateList()
}

newlist(list)

Addbutton.onclick = Adding
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы