I need to pull the value of an input by class and then "echo" or reference that value in an associative array
So far my javascript looks like:
var phone_code = document.getElementsByClassName( 'model' ).value;
var phone = [];
phone["6s"] = "23.52";
phone["5s"] = "9.88";
phone["5Se"] = "14.59";
phone["7"] = "28.49";
phone["s7e"] = "27.49";
phone["s7"] = "23.52";
phone["s6e"] = "21.04";
phone["s6"] = "18.56";
phone["a5"] = "12.61";
phone["j5"] = "7.65";
phone["a3"] = "8.64";
phone["j3"] = "5.17";
phone["p9"] = "16.08";
phone["p9lite"] = "8.64";
document.getElementById("phone-cost").innerHTML = phone[phone_code]
Your Phone would cost you £<span id="phone-cost"></span> per month
phone[phone_code]
Two things:
(1) .getElementsByClassName()
returns an array-like object of elements, not a single element.
(2) While it is possible to use an array the way you are in your code, it's far better to use a plain object.
See below:
var btn = document.getElementById('getPrice');
btn.addEventListener('click', function() {
var phone_code = document.getElementsByClassName('model')[0].value;
var phone = {};
phone["6s"] = "23.52";
phone["5s"] = "9.88";
phone["5Se"] = "14.59";
phone["7"] = "28.49";
phone["s7e"] = "27.49";
phone["s7"] = "23.52";
phone["s6e"] = "21.04";
phone["s6"] = "18.56";
phone["a5"] = "12.61";
phone["j5"] = "7.65";
phone["a3"] = "8.64";
phone["j3"] = "5.17";
phone["p9"] = "16.08";
phone["p9lite"] = "8.64";
document.getElementById("phone-cost").innerHTML = phone[phone_code];
});
<select class="model">
<option value="6s">6s</option>
<option value="5s">5s</option>
<option value="5Se">5Se</option>
</select>
<input type="button" value="Get Price" id="getPrice" />Your Phone would cost you £<span id="phone-cost"></span> per month