Javascript不會從「select」中讀取表格

Question

我想讓我的代碼讀取基於選定列表中選定項目的值，但它表示它未定義。當我簡單地給函數一個值並告訴它返回值時，它會讀取，但不會從表單中獲取值。

以下是我使用

的形式（HTML）代碼：

<form action="" id="orderForm" name="orderForm" onsubmit="return false;"> 
    <select id="item" name='item' onchange="calculateCost()"> 
    <option value="None">Select Item</option> 
    <option value="Candlestick">Candlestick ($10)</option> 
    <option value="Bowl">Bowl ($10)</option> 
    <option value="Burl_Bowl">Burl Bowl ($20)</option> 
    <option value="Clock">Clock ($15)</option> 
    <option value="Vase">Vase ($5)</option> 
    <option value="Pen">Pen ($2)</option> 
    <option value="Top">Spinning Top ($1)</option> 
    </select> 
<div id="totalPrice">hallo</div> 
</form> 

和JavaScript讀取

function calculateCost() 
{ 

    var orderPrice = getItemPrice(); 
    document.getElementById('totalPrice').innerHTML = orderPrice; 
} 

var item_prices= new Array(); 
item_prices["None"]=0; 
item_prices["Candlestick"]=10; 
item_prices["Bowl"]=10; 
item_prices["Burl_Bowl"]=20; 
item_prices["Clock"]=15; 
item_prices["Vase"]=5; 
item_prices["Pen"]=2; 
item_prices["Top"]=1; 

function getItemPrice() 
{ 
    var itemPrice = 0; 
    var theForm = document.forms["orderForm"]; 
    var selectedItem = theForm.elements["item"]; 
    itemPrice = item_prices[selectedItem.value]; 
    return itemPrice; 

} 

Answer 1

HTMLCollection.item()是方法HTML select element將給定從零開始的索引處的特定節點返回到列表中。如果索引超出範圍，則返回null。

theForm.elements["item"]將返回HTMLCollection.item的功能表達以及這是造成undefined值作爲theForm.elements["item"]不具有屬性value

無論是在inline-event通過this或使用其他id和name屬性選擇比item元件

function calculateCost(elem) { 
 
    var orderPrice = getItemPrice(elem.value); 
 
    document.getElementById('totalPrice').innerHTML = orderPrice; 
 
} 
 

 
var item_prices = []; 
 
item_prices["None"] = 0; 
 
item_prices["Candlestick"] = 10; 
 
item_prices["Bowl"] = 10; 
 
item_prices["Burl_Bowl"] = 20; 
 
item_prices["Clock"] = 15; 
 
item_prices["Vase"] = 5; 
 
item_prices["Pen"] = 2; 
 
item_prices["Top"] = 1; 
 

 
function getItemPrice(val) { 
 
    var itemPrice = 0; 
 
    itemPrice = item_prices[val]; 
 
    return itemPrice; 
 

 
}

<form action="" id="orderForm" name="orderForm" onsubmit="return false;"> 
 
    <select id="item" name='item' onchange="calculateCost(this)"> 
 
    <option value="None">Select Item</option> 
 
    <option value="Candlestick">Candlestick ($10)</option> 
 
    <option value="Bowl">Bowl ($10)</option> 
 
    <option value="Burl_Bowl">Burl Bowl ($20)</option> 
 
    <option value="Clock">Clock ($15)</option> 
 
    <option value="Vase">Vase ($5)</option> 
 
    <option value="Pen">Pen ($2)</option> 
 
    <option value="Top">Spinning Top ($1)</option> 
 
    </select> 
 
    <div id="totalPrice">hallo</div> 
 
</form>

編輯：或者只是使用getElementById =>var selectedItem = document.getElementById('item');訪問select元素。 Fiddle here

Answer 2

這整個操作也可以簡化一下。

var item_prices= new Array(); 
item_prices["None"]=0; 
item_prices["Candlestick"]=10; 
item_prices["Bowl"]=10; 
item_prices["Burl_Bowl"]=20; 
item_prices["Clock"]=15; 
item_prices["Vase"]=5; 
item_prices["Pen"]=2; 
item_prices["Top"]=1; 

編輯，如果你想正確的話，你應該在這裏使用一個對象。

item_prices = { 
    None: 0, 
    Candlestick: 10 
}; 
// etc... 

document.getElementById('item').addEventListener('change', function (event) { 
    document.getElementById('totalPrice').innerHTML = item_prices[event.target.value]; 
});