Как создать и заполнить элемент списка кнопкой?

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

function addToList() {
  let food = document.getElementById("food").value;
  let amount = document.getElementById("amount").value;
  let unit = document.getElementById("unit").value;

  document.getElementById("foodlist").innerHTML =
    (food + ' ' + amount + ' ' + unit + '.')

};

<input type = "text" name = "" value = "food" id = "food"><br>
<input type = "text" name = "" value = "amount" id = "amount"><br>

<select id = "unit">
  <option value = "oz">ounces</option>
  <option value = "lb">pounds</option>
  <option value = "servings">servings</option>
</select><br>

<button onclick = "addToList()" type = "button" name = "button" id = "addButton">add</button><br>

<li id = "foodlist"></li>

Я хочу, чтобы данные из текстовых полей создавали новый элемент списка и добавляли данные в объект при каждом нажатии кнопки. все, что я получил до сих пор, это элемент списка, который постоянно обновляется.

Возможный дубликат как добавить новый <li> в <ul> по клику с помощью javascript

— 26.03.2019 08:53

javascript html button listitem

26.03.2019 08:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 023

Ответы 5

Вам нужно будет создать элемент ul и динамически создать элементы li, а затем добавить их как дочерние элементы этого ul. См. код ниже:

function addToList() {
  let food = document.getElementById("food").value;
  let amount = document.getElementById("amount").value;
  let unit = document.getElementById("unit").value;

  let li = document.createElement("li");
  li.textContent = food + ' ' + amount + ' ' + unit + '.';
  document.getElementById("foodlist").appendChild(li);
}

<input type = "text" name = "" value = "food" id = "food">
<br>
<input type = "text" name = "" value = "amount" id = "amount">
<br>

<select id = "unit">
  <option value = "oz">ounces</option>
  <option value = "lb">pounds</option>
  <option value = "servings">servings</option>
</select>

<br>
<button onclick = "addToList()" type = "button" name = "button" id = "addButton">add</button>
<br>
<ul id = "foodlist"></ul>

26.03.2019 08:51

Это потому, что вы заменяете все, используя innerHTML. Вы можете просто повторно использовать существующий HTML-код (используя += вместо +):

function addToList() {
  let food = document.getElementById("food").value;
  let amount = document.getElementById("amount").value;
  let unit = document.getElementById("unit").value;

  document.getElementById("foodlist").innerHTML +=
    ('<li>' + food + ' ' + amount + ' ' + unit + '.' + '</li>')

};

<input type = "text" name = "" value = "food" id = "food">
<br>
<input type = "text" name = "" value = "amount" id = "amount">
<br>

<select id = "unit">
  <option value = "oz">ounces</option>
  <option value = "lb">pounds</option>
  <option value = "servings">servings</option>
</select>

<br>
<button onclick = "addToList()" type = "button" name = "button" id = "addButton">add</button>
<br>
<ul id = "foodlist"></ul>

Это добавляет тексты к тому же элементу списка.

— 26.03.2019 08:53

Уже нет. :)

— 26.03.2019 08:54

26.03.2019 08:52

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

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

function addToList() {
  let food = document.getElementById("food").value;
  let amount = document.getElementById("amount").value;
  let unit = document.getElementById("unit").value;
  
  var node = document.createElement("LI");                 
  var textnode = document.createTextNode(food + ' ' + amount + ' ' + unit + '.');       
  node.appendChild(textnode); 
  document.getElementById("foodlist").appendChild(node)
    

};

<input type = "text" name = "" value = "food" id = "food">
<br>
<input type = "text" name = "" value = "amount" id = "amount">
<br>

<select id = "unit">
  <option value = "oz">ounces</option>
  <option value = "lb">pounds</option>
  <option value = "servings">servings</option>
</select>

<br>
<button onclick = "addToList()" type = "button" name = "button" id = "addButton">add</button>
<br>
<ul id = "foodlist"></ul>

26.03.2019 08:53

Попробуйте добавить содержимое.

пожалуйста, измените эту строку document.getElementById("foodlist").innerHTML = на document.getElementById("foodlist").innerHTML +=

и измените <li id = "foodlist"></li> на <ul id = "foodlist"></ul>

и (food + ' ' + amount + ' ' + unit + '.') к ('<li>'+food + ' ' + amount + ' ' + unit + '.</li>')

function addToList() {
  let food = document.getElementById("food").value;
  let amount = document.getElementById("amount").value;
  let unit = document.getElementById("unit").value;

  document.getElementById("foodlist").innerHTML +=
    ('<li>'+food + ' ' + amount + ' ' + unit + '.</li>')

};

<input type = "text" name = "" value = "food" id = "food">
<br>
<input type = "text" name = "" value = "amount" id = "amount">
<br>

<select id = "unit">
  <option value = "oz">ounces</option>
  <option value = "lb">pounds</option>
  <option value = "servings">servings</option>
</select>

<br>
<button onclick = "addToList()" type = "button" name = "button" id = "addButton">add</button>
<br>
<ul id = "foodlist"></ul>

26.03.2019 08:53

Вы не можете добавлять элементы li к элементу li — родительский элемент должен быть одним из UL или OL

Каждое нажатие кнопки должно вызывать функцию для добавления нового элемента DOM в родительский узел — в этом случае он добавит новый элемент li по мере необходимости с содержимым из других элементов формы.

<!DOCTYPE html>
<html>
    <head>
        <style>
            form{width:60%;font-family:calibri,verdana,arial}
            label{display:block;width:90%;clear:both;float:none;margin:1rem auto;padding:1rem 0 }
            label > input, label > select{float:right;width:80%;padding:1rem;margin:-1rem;}
            label:before{content:attr(for);text-transform:capitalize}
            button{padding:1rem;width:100%;}
        </style>
        <script>
            document.addEventListener('DOMContentLoaded',e=>{
                let form=document.querySelector('form');
                let food=document.querySelector('input[type = "text"][name = "food"]');
                let amount=document.querySelector('input[type = "text"][name = "amount"]');
                let list=document.querySelector('ul[id = "foodlist"]');
                let bttn=document.querySelector('button[name = "button"]');
                let unit=document.querySelector('select[name = "unit"]');




                bttn.addEventListener('click', e=>{
                    let li=document.createElement('li');
                        li.innerText = [
                            food.value,
                            amount.value,
                            unit.value
                        ].join(' ');
                    list.appendChild( li );
                    form.reset();
                })
            });
        </script>
    </head>
    <body>
        <form method='post'>
            <label for='food'><input type='text' name='food' placeholder='Food - eg: Venison' /></label>
            <label for='amount'><input type='text' name='amount' placeholder='Amount - eg: 45' /></label>
            <label for='unit'>
                <select name='unit'>
                    <option selected hidden disabled>Please select
                    <optgroup label='Weight'>
                        <option value='oz'>Ounces
                        <option value='lb'>Pounds
                        <option value='gr'>Grams
                    </optgroup>
                    <optgroup label='Volume'>
                        <option value='ml'>Millilitre
                        <option value='l'>Litres
                        <option value='gall'>Gallons
                    </optgroup>
                    <optgroup label='Misc'>
                        <option value='servings'>Servings
                        <option value='items'>Items
                    </optgroup>
                </select>
            </label>
            <button type='button' name='button'>Add</button>
        </form>

        <!-- LI elements are added to a UL, OL or DL -->
        <ul id='foodlist'></ul>
    </body>
</html>

26.03.2019 09:16

Другие вопросы по теме

Как начать с нижней части прокрутки при загрузке таблицы данных?

Перезагрузить компоненты калитки после нажатия кнопки с помощью AJAX

BeautifulSoup «AttributeError: объект« NoneType »не имеет атрибута« текст »»

Не отображаются значки

Как вертикально центрировать div в div с неизвестной высотой?

Функция Javascript не работает в форме html - TypeError: total не является функцией

Возможно ли иметь более одного липкого столбца с Angular Flex?

Есть ли автоматический способ создания скелета файла спецификации в Galen Framework?

Многоточие (три точки) расширять и сворачивать текст

Как динамически изменить класс CSS в соответствии с угловым выражением

Как создать и заполнить элемент списка кнопкой?

Ответы 5

Другие вопросы по теме

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