Во-первых, вы используете событие onselect
, чтобы начать, но select
- это когда пользователь выбирает текст внутри поля text
или textarea
. Вы захотите использовать событие change
, которое срабатывает при изменении значения элемента.
Далее, вы не работаете с вашим массивом должным образом, и ваш результат возвращается как ничто. Массивы имеют неотрицательные целочисленные индексы, в которых можно хранить данные. У них нет имен ключей для хранения данных - объекты делают это. Здесь вы можете видеть, что после запуска этих строк у вас все еще есть пустой массив:
var moneyprice = new Array(); // Ok.
// moneyprice doesn't/can't have a "loon" or a "toon" index
// so neither of these lines accomplish anything
moneyprice["loon"] = 1;
moneyprice["toon"] = 2;
console.log(moneyprice); // Empty array
// ******************************************
// Now, this is how to use an array:
var moneyprice2 = new Array(); // Ok.
// You interact with an Array via its numeric indexes:
moneyprice2[0] = "loon";
moneyprice2[1] = "toon";
console.log(moneyprice2); // Empty array
Теперь не совсем понятно, что вы пытаетесь делать с этим массивом, и кажется, что то, что вы пытаетесь сделать, не имеет особого смысла - ваши функции говорят о деньгах и подсчете итогов, но ваши select
имеет строковые значения.
Наконец, код, который вы используете, использует древние методы, которые вы не должны использовать слишком удобно. Там много плохого кода, так что учитесь из авторитетного источника. Сеть разработчиков Mozilla - это одно.
Посмотрите на это уменьшенное решение, чтобы дать вам представление о «движущихся частях», чтобы что-то запустить и запустить. Обратите внимание, как весь JavaScript отделен от HTML.
// Get your element references the proper way.
// No need to get a reference to the form, just to get a reference
// to the select and even if we did want to get a reference
// to the form, we use the modern DOM API to do it (not document[forms]).
let select = document.getElementById("money");
let pg = document.getElementById("pg");
// Set up event handlers in JavaScript, not with HTML attributes
select.addEventListener("change", calculateTotal);
function calculateTotal() {
// .innerHTML should only be used when the string you are dealing with
// contains HTML that needs to be parsed as such. When there isn't any
// HTML, use .textContent
pg.textContent = select.value;
}
<form id="moneyform">
<fieldset>
<select id="money" name="money">
<option value="loon">1 dollar</option>
<option value="toon">2 dollar</option>
</select>
<br>
<p id="pg"></p>
</fieldset>
</form>