Nie powinno się używać w atrybutach value tak dziwacznych nazw - to samo tyczy się kluczy w tablicach asocjacyjnych.
Działające rozwiązanie:
var sizePrices = [];
sizePrices.push(['Please choose your size.', 0]);
sizePrices.push(['Good choice :) Price - €5.00', 5]);
sizePrices.push(['Perfect choice :) Price - €7.50', 7.5]);
sizePrices.push(['Attention !! Portion size matters. A balanced diet is not only about eating the right kinds of foods but also about consuming them in the right amounts. Larger portions may encourage over consumption, which, in turn, may lead to weight gain. Price - €17.00', 17]);
function calculate() {
let quantity = document.forms['myForm'].elements['quantity'].value;
let size = document.forms['myForm'].elements['size'].value;
let output = document.getElementById('output');
if (quantity && size) {
output.innerHTML = sizePrices[size][0] + '<br />total price - €' + (parseFloat(quantity) * parseFloat(sizePrices[size][1]));
} else {
output.innerHTML = 'Incorrect data!'
}
}
<form id="myForm" name="myForm">
<select id="size">
<option value="0">Size</option>
<option value="1">Large</option>
<option value="2">Extra-Large</option>
<option value="3">Supersize</option>
</select>
<input type="number" id="quantity" placeholder="Quantity" min="1" max="100">
<button type="button" onclick="calculate()">Oblicz</button>
</form>
<span id="output"></span>