Why is the change to my form input value not appearing in Javascript?

Question

I am writing a script that calculates the cost of a customer's order of beer cases. There is a select menu of dynamically generated options of beer the customer has to choose from which includes the name of the item and it's price. The user selects their quantity and clicks the "Add Item" button. When this button is clicked, the item's name and price should be added to the first available input under the "Item Description" column.

The problem is that the changes to the "descriptionInput0" input do not appear. When I log the "firstAvailable" variable to console, the changes appear there, but not in the browser. I'm not really sure what's going on. Any ideas? Thanks for your time.

Here is a jsFiddle and the code.

window.onload = calculator();
    
    function calculator() {
    
        var descriptions = new Array("Shamrock Ale", "Lucky Pilsner", "Irish Wheat", "Irish Malt", "Shamrock Rye");
    
        var prices = new Array(24.99, 27.99, 27.99, 32.99, 35.99);
    
        populateSelectMenu(descriptions, prices);
    
        var descriptionMenu = document.getElementById("descriptionMenu");
    
        addButton = document.getElementById("addItem");
        addButton.onclick = function () {
    
            firstAvailable = detectAvailable();
    
            firstAvailable = document.getElementsByName("descriptionInput" + firstAvailable);
            console.log(firstAvailable);
            firstAvailable.value = descriptionMenu.options[descriptionMenu.selectedIndex].text;
        }
    
    }
    
    function populateSelectMenu(descriptions, prices) {
    
        var descriptionMenu = document.getElementById("descriptionMenu");
    
        for (var i = 0; i < descriptions.length; i++) {
            option = document.createElement("option");
            option.value = i;
            option.innerHTML = descriptions[i] + ": $" + prices[i];
            descriptionMenu.appendChild(option);
        }
    
    }
    
    function detectAvailable() {
    
        var descriptionInputs = document.querySelectorAll("input[name^='descriptionInput']");
    
        inputs: for (var i = 0; i < descriptionInputs.length; i++) {
    
            if (descriptionInputs[i].value != '') {
                continue inputs;
            } else {
                var firstAvailable = i;
                break inputs;
            }
    
        }
    
        return firstAvailable;
    }

  <form name="calculator" id="calculator">
        <div id="userInput">
            <select name="descriptionSelect" id="descriptionMenu"></select>
            <label>Quantity</label>
            <input type="number" name="quantity" min="1" max="10" size="2" value="1">
            <input type="button" value="Add to List" id="addItem">
        </div>
        <table align="center" cellspacing="1" cellpadding="5" width="40%" border="1">
            <thead>
                <tr>
                    <th>Item Description</th>
                    <th>Unit Price</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput0" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput0" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput0" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput0" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput1" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput1" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput1" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput1" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput2" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput2" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput2" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput2" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput3" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput3" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput3" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput3" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="descriptionInput4" value="" size="30">
                    </td>
                    <td>
                        <input type="text" name="uPriceInput4" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="quantityInput4" value="" size="5">
                    </td>
                    <td>
                        <input type="text" name="tPriceInput4" value="" size="5">
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="right">Total Price:</td>
                    <td>
                        <input type="text" name="totalPrice" size="5" disabled>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

Answer 1

firstAvailable[0].value = descriptionMenu.options[descriptionMenu.selectedIndex].text;

firstAvailable is NodeList[1] an array so you need to specify the index to get NodeElement.

Just a suggestion.

function detectAvailable() {
    var descriptionInputs = document.querySelectorAll("input[name^='descriptionInput']");
    for (var i = 0; i < descriptionInputs.length; i++) {
        if (descriptionInputs[i].value == '') {
            return descriptionInputs[i];
        }
    }
}

And

addButton.onclick = function () {
    var firstAvailable = detectAvailable();
    firstAvailable.value = descriptionMenu.options[descriptionMenu.selectedIndex].text;
}