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 probelm, 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>
Submit an article or tip