Как создать и заполнить элемент списка кнопкой? - PullRequest
Новая
       26

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

0 голосов
/ 26 марта 2019

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

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>

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

Ответы [ 5 ]

2 голосов
/ 26 марта 2019

Вам потребуется создать элемент 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>
1 голос
/ 26 марта 2019

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

Просто нужно добавить новый узел списка в 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>
0 голосов
/ 26 марта 2019

Вы не можете добавить li элементы к элементу li - родительский элемент должен быть одним из следующих элементов: eith 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>
0 голосов
/ 26 марта 2019

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

измените эту строку 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>
0 голосов
/ 26 марта 2019

Это потому, что вы заменяете все, используя 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...