I want to make it possible to change the value by using radio buttons/dropdown menu/list/etc

Question

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" is types of tree. I want to change the type by using som sort of buttons (radio, drop down menu, list, buttons, etc) to change this value and use it to get the values from the different arrays

Example: I have to choose between the buttons "Gran", "Furu" and "Lauvtre" and when I click one of them I get up the same information I would have gotten If I had just write tree = trees["Gran"] in my 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;
        //Fritt etter 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"]; //For å behandle gran[]
        }
        function vis(){
            var tekst = "Økning per periode:</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]]) + "mill. trær" + "</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 storste = 0;
            for(var i = 0; i < gjennomsnitt.length; i++){
                storste = gjennomsnitt[i] > gjennomsnitt[storste] ? i : storste;
            }

            document.getElementById("utskrift").innerHTML = tekst + "</br>" +
            "Perioden med sterkest gjennomsnittlig vekst var mellom " + years[storste] + " - " + years[storste+1];
        }   

        </script>
    </head>
    <body>
        <h1>Utvikling grove grantrær i Norge</h1>
        <button id="btnVis">Vis data</button>
        <p id="utskrift"></p>
    </body>
</html>

Answer 1

I hope I get your question right, does something like this work for you??:

FIDDLE

html:

<div>Furumuru
  <input type="radio" data-key="Furumuru"></input>
</div>
<div>Granmran
  <input type="radio" data-key="Granmran"></input>
</div>
<div>Lauvtremauvtre
  <input type="radio" data-key="Lauvtremauvtre"></input>
</div>
<div id="result"></div>

js:

var inputs = Array.prototype.slice.call(document.getElementsByTagName("input"));
function getmet(e){
    inputs.filter(function(d,i){return d!==this},this).forEach(function(d,i){d.checked = false;})
    document.getElementById("result").textContent = JSON.stringify(getmet.__data[this.dataset.key]);
}
getmet.__data = {
    Furumuru:{1915: 20, 1950: 31, 1970: 53, 1990: 89, 1995: 102, 2000: 117},
    Granmran:{1915: 23, 1950: 39, 1970: 72, 1990: 89, 1995: 92, 2000: 99},
    Lauvtremauvtre:{1915: 4, 1950: 6, 1970: 8, 1990: 12, 1995: 16, 2000: 18}
};

inputs.forEach(function(d,i){
    d.addEventListener("change",getmet,false);
})

I want to make it possible to change the value by using radio buttons/dropdown menu/list/etc

Question

1 answers

solution1
0 2018-04-24 18:23:53

I want to make it possible to change the value by using radio buttons/dropdown menu/list/etc

Question

1 answers

solution1 0 2018-04-24 18:23:53

solution1
0 2018-04-24 18:23:53