Как изменить или заменить элементы в списке JavaScript?

Question

Дональд

javascript

Как изменить или заменить элементы в списке JavaScript?

Как сделать так, чтобы при добавлении нового элемента в массив не создавался новый список, а заменялся существующий? Я пробовал использовать `.innerHTML`, но это не решило проблему. В приведенном коде появляется второй список вместо обновления. Вот мой код: 

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

<pre><code class="javascript">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 &lt; 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</code></pre>

10 декабря 2024 г. 14:23

Ответы на вопрос 2

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

Answer 1

Ваш код создает новый список каждый раз, когда вы добавляете новую книгу. Чтобы исправить это, нужно обновлять уже существующий элемент списка вместо создания нового. 

Вот измененный код с объяснением:

```html
<!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>
```

```javascript
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)

// Создаем элемент списка один раз
const ulEl = document.createElement('ol'); 
document.body.append(ulEl);

function newlist() { 
    // Очистим текущий список перед обновлением
    ulEl.innerHTML = ''; 
    for (let i = 0; i < list.length; i++) {
        const liEl = document.createElement('li'); 
        liEl.textContent = `${list[i]}`
        ulEl.append(liEl)
    }
}

// Инициализация списка
newlist();

function Adding() {
    const newBook = prompt('Введите название книги');
    if (newBook) { // Проверяем, что ввод не пустой
        list.push(newBook);
        newlist(); // Обновляем список
    }
}

// Привязываем обработчик события к кнопке
Addbutton.onclick = Adding;
```

### Объяснение изменений:

1. **Создание `ol` элемента один раз**: Теперь `ulEl` создается один раз в начале, а не каждый раз, когда добавляется новая книга. Это позволяет избежать дублирования списков.

2. **Очистка списка**: В функции `newlist()` я добавил строку `ulEl.innerHTML = '';`, которая очищает содержимое списка перед тем, как мы его обновим с новыми элементами. Это позволяет обновить отображение списка без дублирования.

3. **Проверка пользователя**: Я также добавил проверку на то, что пользователь ввел название книги, прежде чем добавлять её в список. Это позволяет избежать добавления `undefined` в массив, если пользователь отменил запрос на ввод.

Теперь при нажатии на кнопку "Добавить книгу" список будет обновляться, вместо того чтобы создавались дубликаты.

Answer 2

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