Выбор значения объекта на основе значения выпадающего поля

Question

Codepen: https://codepen.io/moarpie/pen/EBKVBL

Я пытаюсь сделать две вещи в этом проекте:

• Отображение текста на основе значения селектора
• Получить значение извведите поле и измените его по значению объекта на основе выбора из выпадающего списка

Первая часть, которую я выполнил, но у меня возникают проблемы с работой второй части.

Пример:Если из выпадающего списка выбран bear , я хочу вывести bear.weight , а если выбран puma , я хочу вывести puma.weight .

Поэтому вместо

var outputValue = (parseInt(userInput) / parseInt(puma.weight)) * 100;

ParseInt ( puma .weight) должен быть любым значением, выбранным в раскрывающемся списке.

Iя добился этого, просто используя операторы if, но, конечно, это не лучшая практика и становится утомительным, если у меня есть 100 объектов на выбор.

Answer 1

вы можете создать объект с именем веса и определить значение для всего раскрывающегося значения, как если бы у вас было значение в раскрывающемся списке

<select id="animal">
<option value="bear">bear</option>
<option value="puma">puma</option>
</select>

тогда объект должен быть похож на weight = {'bear': 150, 'puma': 200}; теперь предположим, что вы получили пуму из выпадающего списка, тогда

let output = parseInt(userInput) /parseInt(weight[document.querySelector( "#animal option:selected" ).value]) * 100

Answer 2

Внутри функции callBack события click вы можете получить строку из текущей выбранной опции, используя

var selectedAnimal = document.getElementById('animalSelector').value;

Это вернет, например, puma

.значение веса из связанного с ним объекта (var puma = {name: "pumaName", weight: 500};) вы можете использовать

eval(selectedAnimal).weight

Так, например,

var outputValue = (parseInt(userInput) / parseInt(eval(selectedAnimal).weight)) * 100;