PDA

View Full Version : JavaScript working in IE8



padders01
11-18-2015, 01:57 PM
Hi,

Can anyone help please

I have built javascript with some help, but it doesn't work in IE8 (works fine in Chrome)

I need it to work in IE8 due to work computers on XP.

I have googled the problem, and its to do with object.keys and foreach, filter and reduce.

Really not sure where to go next


<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript">


var prices = [
{ type: 'monthly', box: 'Sky HD', product: 'Platinum', price: '10' },
{ type: 'monthly', box: 'Sky HD', product: 'Gold', price: '20' },
{ type: 'monthly', box: 'Sky HD', product: 'Diamond', price: '30' },
{ type: 'monthly', box: 'Sky+', product: 'Platinum', price: '40' },
{ type: 'monthly', box: 'Sky+', product: 'Gold', price: '50' },
{ type: 'monthly', box: 'Sky+', product: 'Diamond', price: '60' },
{ type: 'monthly', box: 'Sky Standard', product: 'Platinum', price: '70' },
{ type: 'monthly', box: 'Sky Standard', product: 'Gold', price: '80' },
{ type: 'monthly', box: 'Sky Standard', product: 'Diamond', price: '90' },
{ type: 'annually', box: 'Sky HD', product: 'Platinum', price: '110' },
{ type: 'annually', box: 'Sky HD', product: 'Gold', price: '120' },
{ type: 'annually', box: 'Sky HD', product: 'Diamond', price: '130' },
{ type: 'annually', box: 'Sky+', product: 'Platinum', price: '140' },
{ type: 'annually', box: 'Sky+', product: 'Gold', price: '150' },
{ type: 'annually', box: 'Sky+', product: 'Diamond', price: '160' },
{ type: 'annually', box: 'Sky Standard', product: 'Platinum', price: '170' },
{ type: 'annually', box: 'Sky Standard', product: 'Gold', price: '180' },
{ type: 'annually', box: 'Sky Standard', product: 'Diamond', price: '190' }
];

var options = ['type','box','product'];


function setupOnLoad() {
options.forEach(function(opt) {
var drop = document.querySelector('.'+opt);
var unique = Object.keys(prices.reduce(function(x,y) { return x[y[opt]] = 1, x; }, {}));
unique.forEach(function(value) {
var htmlOption = document.createElement('option');
htmlOption.value = htmlOption.innerText = value;
drop.add(htmlOption);
});

drop.onchange = function() {
updatePrice();
};
});

updatePrice();
}

function updatePrice() {
var matches = prices;
options.forEach(function(opt) {
var drop = document.querySelector('.'+opt);
matches = matches.filter(function(price) { return price[opt] == drop.value; });
});
document.querySelector('.price').innerText = matches[0].price;
};



</script>

<style type="text/css">
div { margin: 5px; }
select { width: 200px; }
label { display: inline-block; width: 100px; }
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body onload="setupOnLoad();">

<div>
<label>Type</label>
<select class="type"></select>
</div>
<div>
<label>Box</label>
<select class="box"></select>
</div>
<div>
<label>Product</label>
<select class="product"></select>
</div>
<div>
<label>Price</label>
<span class="price"></span>
</div>
</body>

</html>