尝试从两个不同的文本输入中获取值并将它们放在同一个列表项中

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 = '';
}