如何使用按钮创建和填充列表项？

问题描述 投票：0回答：5

我正在尝试使用输入到文本字段中的数据创建要显示的项目列表。我的麻烦是，当我想添加第二个列表项时，第一个列表项只是更新。我尝试了一些不同的东西而且我被卡住了。

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>

我希望文本字段中的数据创建一个新的列表项，并在每次按下按钮时将数据添加到对象。到目前为止我得到的只是列表项不断更新。

javascript html button listitem
5个回答
2
投票

您需要创建一个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
投票

原因是当您想要追加新项时没有创建新的列表元素，这就是为什么它一直在替换初始值并更新初始元素。

只需要在添加新项目时使用以下代码将新列表节点附加到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
投票

尝试附加内容。

请将此行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
投票

那是因为你用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>
0
投票

你不能将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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.