嘗試從兩個不同的文本輸入中獲取值並將它們放在同一個列表項中

Question

我正在嘗試從兩個單獨的字段中獲取輸入，並使用 JavaScript 將它們放入同一行。 到目前為止，我已經能夠接受輸入，但它們最終會出現在不同的行上。

這是我的 HTML --

   <input type="button" value="Add A Gear Item" class='btn' onclick="addGearItem()">                    </div>
                         </form>
                    </div>
                    <!---Gear List Card-->
                    <div class="card-action">
                        <h5 id='current-list'>Gear List</h5>
                        <hr>
                        <ul class='collection gear-list' id='gear-ul'>
                            <table>
                    <tr class="collection-item">
                        <td>
                           <li class="collection-item gear-item">
                            IEM Pack 1
                           </li>
                        </td>
                        <td>
                            <li class="collection-item item-cost">380</li>
                        </td>
                    </tr>
                    <tr class="collection-item gear-item">
                        <td>
                           <li class="collection-item gear-item">
                            IEM Pack 2
                           </li>
                        </td>
                        <td>
                            <li class="collection-item item-cost">380</li>
                        </td>
                    </tr>
                    </table>
                </div>
                <div class="row center">
                    <input type="submit" value="Purchase Item" class='btn'>
                </div>
            </div>

這是我的 JS Function：

function addGearItem(){
    let setGearItem = document.getElementById('gear').value
    let setGearPrice = document.getElementById('cost').value
    const newGearItem = document.createElement('li')
    const newGearPrice = document.createElement('li')
    newGearPrice.className = "collection-item item-cost";
    newGearItem.className = "collection-item gear-item";
    newGearItem.appendChild(document.createTextNode(setGearItem));
    newGearPrice.appendChild(document.createTextNode(setGearPrice));
    document.getElementById('gear-ul').append(newGearItem);
    document.getElementById('gear-ul').append(newGearPrice);
    document.getElementById('gear').value = '';
    document.getElementById('cost').value = '';

}

Answer 1

我沒有在您的 HTML 文件中看到關閉的 ul 標記，這可能是個問題。 此外，如果您嘗試將兩個輸入值添加到一個 li 元素中，那么為什么要在 JS function 中創建兩個單獨的 li 標簽？

也許試試這個：

function addGearItem(){
  let setGearItem = document.getElementById('gear').value
  let setGearPrice = document.getElementById('cost').value
  const li = document.createElement('li');
  li.appendChild(document.createTextNode(`${setGearItem} ${setGearPrice}`));
  document.getElementById('gear-ul').append(li);
  document.getElementById('gear').value = '';
  document.getElementById('cost').value = '';
}