如何使用按鈕創建和填充列表項？

Question

我正在嘗試使用輸入到文本字段中的數據來創建要顯示的項目列表。 我的麻煩是，當我想添加第二個列表項時，第一個列表項剛剛更新。 我嘗試了一些其他操作，但遇到了麻煩。

 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> 

我希望文本字段中的數據創建一個新的列表項，並在每次按下按鈕時將數據添加到對象中。 到目前為止，我所得到的只是列表項不斷更新。

Answer 1

您將需要創建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> 

Answer 2

原因是因為要添加新項目時未創建新的列表元素，這就是為什么它會不斷替換初始值並更新初始元素的原因。

添加新項並設置好后，只需使用以下代碼將新的列表節點附加到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> 

Answer 3

那是因為您使用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> 

Answer 4

嘗試附加內容。

請將此行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> 

Answer 5

您不能添加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>