var trees = [];
trees["Furu"] = {1915: 20, 1950: 31, 1970: 53, 1990: 89, 1995: 102, 2000: 117};
trees["Gran"] = {1915: 23, 1950: 39, 1970: 72, 1990: 89, 1995: 92, 2000: 99};
trees["Lauvtre"] = {1915: 4, 1950: 6, 1970: 8, 1990: 12, 1995: 16, 2000: 18};
tree = trees["Gran"];
"Gran", "Furu" and "Lauvtre" represent different types of trees. To change the type, you can use buttons, a dropdown menu, or a list to make a selection and retrieve the values from the corresponding arrays.
For example, you can choose between "Gran", "Furu", and "Lauvtre" buttons, and upon clicking one of them, you will receive the same information as if you had manually set tree = trees["Gran"] in your code.
<!doctype html>
<html>
<head>
<title>Intro JavaScript</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
p {font: 20px arial, sans-serif;}
</style>
<script>
window.onload = oppstart;
//Adapted from Amund
var trees = [];
trees["Furu"] = {1915: 20, 1950: 31, 1970: 53, 1990: 89, 1995: 102, 2000: 117};
trees["Gran"] = {1915: 23, 1950: 39, 1970: 72, 1990: 89, 1995: 92, 2000: 99};
trees["Lauvtre"] = {1915: 4, 1950: 6, 1970: 8, 1990: 12, 1995: 16, 2000: 18};
gjennomsnitt = [];
var years = [1915, 1950, 1970, 1990, 1995, 2000];
var tree;
function oppstart(){
document.getElementById("btnVis").onclick = vis;
tree = trees["Gran"]; //To handle gran[]
}
function vis(){
var tekst = "Increase per period:</br> </br>";
for (var i = 0; i < years.length-1; i++){
tekst += years[i] + " - " + years[i+1] +' <i class="fa fa-arrow-right"></i> ' + (tree[years[i+1]]- tree[years[i]]) + " million trees" + "</br>";
}
for(var i = 0; i < years.length-1; i++){
gjennomsnitt.push((tree[years[i+1]]- tree[years[i]])/(years[i+1] - years[i]));
}
var highest = 0;
for(var i = 0; i < gjennomsnitt.length; i++){
highest = gjennomsnitt[i] > gjennomsnitt[highest] ? i : highest;
}
document.getElementById("utskrift").innerHTML = tekst + "</br>" +
"The period with the strongest average growth was between " + years[highest] + " - " + years[highest+1];
}
</script>
</head>
<body>
<h1>Development of spruce trees in Norway</h1>
<button id="btnVis">Show data</button>
<p id="utskrift"></p>
</body>
</html>