为什么改变我的表单输入值不出现在Javascript中

我正在编写一个脚本，用于计算客户订购啤酒箱的成本。有一个动态生成啤酒选项的选择菜单，客户必须从中选择，其中包括项目名称和价格。用户选择他们的数量，点击"添加项目"按钮。当单击此按钮时，商品的名称和价格应添加到"商品描述"列下的第一个可用输入中。

问题是没有出现对"descriptionInput0"输入的更改。当我将"firstAvailable"变量记录到控制台时，更改会出现在控制台，但不会出现在浏览器中。我不太清楚发生了什么。什么好主意吗?谢谢你的宝贵时间。

这是一个jsFiddle和代码。

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>