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

Question

I'm trying to take inputs from two separate fields and put them into the same line using JavaScript. So far I've been able to take the inputs but they end up on separate lines.

Here is my 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>

Here is my 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

I don't see a ul tag closed in your HTML file, that might be a problem. Also if you are trying to add two input values into one li element, then why are you creating two separate li tags in your JS function?

Maybe try this:

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