簡體   English   中英

我想通過單選按鈕/下拉菜單/列表/等來更改值

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

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”和“ Lauvtre”是樹的類型。 我想通過使用som排序按鈕(單選,下拉菜單,列表,按鈕等)來更改類型,以更改此值並使用它從不同數組中獲取值

示例:我必須在按鈕“ Gran”,“ Furu”和“ Lauvtre”之間進行選擇,當我單擊其中的一個按鈕時,我會得到與如果我只寫tree = trees["Gran"]會得到的相同信息。在我的代碼中

<!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>

希望我能正確回答您的問題,這樣對您有用嗎?

小提琴

的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);
})

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM