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

我正在写一个脚本，计算客户订购啤酒盒的成本。有一个动态生成啤酒选项的选择菜单，客户必须从中选择，其中包括商品名称和价格。用户选择其数量并单击“添加项目”按钮。单击此按钮时，项目名称和价格应添加到“项目说明”列下的第一个可用输入中

问题是“descriptionInput0”输入的更改不会出现。当我将“firstAvailable”变量记录到console时，更改会显示在那里，但不会显示在浏览器中。我真的不确定发生了什么事。有什么想法吗？谢谢你抽出时间

这是一个简单的例子和代码

window.onload=calculator（）；
函数计算器（）{
var descriptions=新数组（“三叶草麦芽”、“幸运皮尔斯纳”、“爱尔兰小麦”、“爱尔兰麦芽”、“三叶草黑麦”）；
var价格=新数组（24.99,27.99,27.99,32.99,35.99）；
普及选择菜单（说明、价格）；
var descriptionMenu=document.getElementById（“descriptionMenu”）；
addButton=document.getElementById（“addItem”）；
addButton.onclick=函数（）{
firstAvailable=detectAvailable（）；
firstAvailable=document.getElementsByName（“descriptionInput”+firstAvailable）；
console.log（第一个可用）；
firstAvailable.value=descriptionMenu.options[descriptionMenu.selectedIndex]。文本；
}
}
功能populateSelectMenu（说明、价格）{
var descriptionMenu=document.getElementById（“descriptionMenu”）；
对于（变量i=0；i

量
项目说明
单价
量
价格
总价：

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];
        }
    }
}

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];
        }
    }
}

---

如何实现

detectAvailable（）

函数？这是addButton.onclick函数下的第一个命令。如何实现

detectAvailable（）

函数？这是addButton.onclick函数下的第一个命令。

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