为什么我的表单输入值的更改没有出现在 Javascript 中？

Question

我正在编写一个脚本来计算客户订购啤酒箱的成本。有一个 select 菜单，其中包含动态生成的啤酒选项，客户必须从中进行选择，其中包括项目名称及其价格。用户 select 数量并单击 "Add Item" 按钮。单击此按钮后，应将商品名称和价格添加到 "Item Description" 列下的第一个可用输入中。

问题是对 "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>

Answer 1

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

firstAvailable是NodeList[1]一个数组所以需要指定索引才能得到NodeElement.

只是一个建议。

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

和

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

为什么我的表单输入值的更改没有出现在 Javascript 中？

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

javascript

html

dom

dom-traversal

nodelist