javascriptを使用してドロップダウンメニューの選択肢に基づいて辞書からデータを取得する

javascriptを使用してドロップダウンメニューからクライアントの選択に基づいてデータを表示しようとしています。データは辞書内にあります。どのように私はそれを取得し、それを提示することができますか？これまでのところ私のコードです。 HTMLファイル：javascriptを使用してドロップダウンメニューの選択肢に基づいて辞書からデータを取得する

<head> 
    <script type="text/javascript" src="model.js"></script> 
</head> 

<body> 
<form id="countryProperties"> 
    <h4>1. Select two countries for comparison: <br><br> 
     <select class="round" id="c1" name="Select1" > 
      <option value="hide">--Select the first country to compare--</option> 
      <option value="Germany">Germany</option> 
      <option value="Norway">Norway</option> 
      <option value="Greece">Greece</option> 
      <option value="Poland">Poland</option> 
      <option value="Denmark">Denmark</option> 
     </select> 

     <select class="round" id="c2" name="Select2" onclick > 
      <option value="hide">--Select the second country to compare--</option> 
      <option value="Germany">Germany</option> 
      <option value="Norway">Norway</option> 
      <option value="Greece">Greece</option> 
      <option value="Poland">Poland</option> 
      <option value="Denmark">Denmark</option> 
     </select> 
    </h4> 
    <h4>2. Select category for comparison:</h4> 
    <select name="categoryDropdown"> 
     <option value="hide">--Select the category to compare--</option> 
     <option value="Population">Population</option> 
     <option value="Area">Area</option> 
    </select> 
</form> 
<br> 
<button type="button" onclick="myFunction()">Submit</button> 
<p id="result"></p> 


<!-- Add main JS file. --> 
<script src="model.js"></script> 
</body> 
</html>

そして、私のJSコード：

function myFunction() { 
    var x = document.getElementById("c1").value; 
    var y = document.getElementById("c2").value; 
    document.getElementById("result").innerText = typeof(x); 

} 
var countryData = { 
    "Germany": {name: "Germany", area: "357,022 sq km", popul: "80,722,792"}, 
    "Norway": {name: "Norway", area: "323,802 sq km", popul: "5,265,158"}, 
    "Greece": {name: "Greece", area: "43,094 sq km", popul: "5,593,785"}, 
    "Poland": {name: "Poland", area: "312,685 sq km", popul: "38,523,261"}, 
    "Denmark": {name: "Denmark", area: "43,094 sq km", popul: "5,593,785"} 
}; 
console.log(typeof(countryData.Germany))

は、ここで全体のことだ：https://jsfiddle.net/foha1p7w/

私は両国のプロパティの並置を示したいと思います。私はここで何ができますか？おかげ

出典

2017-05-15 0x1

jsfiddleは、ここで書いたコードと同じではありません。 –

@DouglasTylerGordon私の悪いです。それは古いドラフトでした。リンクが今すぐ動作するはずです。 – 0x1

私は実際には "並置"を行うコードを書こうとする試みはあまりありません。それらを比較する無数の方法があります。値を順番に表示します。それらをグリッドに表示する。その違いを示すグラフを示します。 –

あなたは、あなたがこの

<select id="c3" name="categoryDropdown"> 
     <option value="hide">--Select the category to compare--</option> 
     <option value="popul">Population</option> 
     <option value="area">Area</option> 
    </select>

のように、この

var countryData = { 
    "Germany": {name: "Germany", area: "357,022 sq km", popul: "80,722,792"}, 
    "Norway": {name: "Norway", area: "323,802 sq km", popul: "5,265,158"}, 
    "Greece": {name: "Greece", area: "43,094 sq km", popul: "5,593,785"}, 
    "Poland": {name: "Poland", area: "312,685 sq km", popul: "38,523,261"}, 
    "Denmark": {name: "Denmark", area: "43,094 sq km", popul: "5,593,785"} 
}; 

myFunction = function() { 
    var x = document.getElementById("c1").value; 
    var y = document.getElementById("c2").value; 
    var c = document.getElementById("c3").value; 

    document.getElementById("result").innerText = x + ' = ' + countryData[x][c] + ' and ' + y + ' = ' + countryData[y][c]; 

}

の変更のような側面で、比較すると非常に粗製の方法は、単に値側を示すことになるあなたの比較ドロップダウンを比較する方法を示していないので、

フィドル - https://jsfiddle.net/vabii/93wqmkh3/

出典

2017-05-15 19:43:26 vabii

ありがとう。私はcountryDataにアクセスする方法を知りませんでした。私の愚か。 – 0x1

あなたの質問は少し漠然とした - 私はあなたがこのデータを提示したいかどうかはわかりませんが、ここでは、おそらくのですあなたがすることができます暗黙のもの：https://jsfiddle.net/ax2818ya/。私は文章を作るために文字列補間を使用しました。

ここでは主な機能です：私はあなたのオブジェクトのキー名を一致させるために「比較」の値を変更しなければならなかった

function myFunction() {  
    var countryOne = document.getElementById("c1").value; 
    var countryTwo = document.getElementById("c2").value; 
    var comparison = document.getElementById("comparison").value; 
    if (comparison === "Area") { 
     comparison = "area" 
    } else if (comparison === "Population") { 
     comparison = "popul" 
    } 
    const output = `${countryOne} has ${comparison} ${countryData[countryOne][comparison]} and ${countryTwo} has ${comparison} ${countryData[countryTwo][comparison]}` 
    document.getElementById("result").innerText = output; 
}

お知らせ。私がウィンドウにすべてを置くという事実を無視して、私はJSFiddleでちょうど悪いです。これらのフィールドのいずれかが空白のままで、ユーザーが「送信」をクリックすると、何が起こるかを慎重に検討してください。一般的なヒントとして、変数を命名するときにできるだけ説明的にしてみてください。xとyを使用するだけではありません。

出典

2017-05-15 19:43:36

ありがとうございます。今私はもっと良いアイデアを持っています。 – 0x1

javascriptを使用してドロップダウンメニューの選択肢に基づいて辞書からデータを取得する

答えて

関連する問題