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

Либо пройти this в inline-event или использовать другие 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>

Edit: Или просто использовать 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; 

EDIT, вы должны использовать здесь объект, если хотите быть верным.

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

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