我正在编写一个脚本来计算客户订购啤酒箱的成本。有一个动态生成啤酒选项的选择菜单，客户必须从中选择，其中包括商品名称及其价格。用户选择他们的数量并点击＆＃34;添加项目＆＃34;按钮。单击此按钮时，项目的名称和价格应添加到＆＃34;项目描述＆＃34;下的第一个可用输入中。柱。
问题在于＆＃34; descriptionInput0＆＃34;输入不会出现。当我记录＆＃34; firstAvailable＆＃34;变量到控制台，更改出现在那里，但不在浏览器中。我不确定发生了什么。有任何想法吗？谢谢你的时间。
这是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>
答案 0 :(得分：0)
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;
}