如何使用單選按鈕從二維數組中獲取多個輸出？

Question

我正在創建一個網頁，允許用戶根據難度搜索遠足徑。 他們將 select 選擇“簡單”或“困難”單選按鈕，並將提供相應的線索。

這是我的 HTML：

遠足荷蘭！

 <meta content="width=device-width, initial-scale=1" name="viewport" /> <link rel="stylesheet" type="text/css" href="style.css">

<script src="src/index.js"></script>

 <script src="src/index.js"></script>

我已經將路徑名稱以及難度和長度存儲在一個二維數組中。 我已經能夠做到這一點，因此每個單選按鈕都會顯示一個路徑名稱，但是當我將另一條“簡單”路徑添加到數組時，只會顯示一個名稱。 看起來它正在跳過數組的第一行。 我如何獲得 output 多個路徑名稱？

這是我的腳本：

 //Allows console.log to display what radio button was selected. let chosen; document.getElementById('easy').onclick = function () { console.log("Easy") chosen = "Easy"; } document.getElementById('hard').onclick = function () { console.log("Hard") chosen = "Hard"; } function displayArray() { //Two dimensional array let hikes = [ ['Easy','Silver Mine Head Path', 5], ['Hard','White Horse Path', 4], ['Easy','Father Troy', 3] ]; console.log(hikes) let results = []; console.log(results); for(i = 0; i < hikes.length; i++) { if(hikes[i][0] == chosen){ //Checks row for difficulty console.log("Row: "+chosen) results[i] = hikes[i][1]; //Shows corresponding hike with chosen difficulty document.getElementById("output").innerHTML //Shows users their result = "Trail: "+results[i]; } } }

Answer 1

嘗試用這個替換你的 for 循環：

for (i = 0; i < hikes.length; i++) {
  if (hikes[i][0] == chosen) {
    //Checks row for difficulty
    console.log("Row: " + chosen);

    results.push(hikes[i][1]); //Shows corresponding hike with chosen difficulty
  }
}

document.getElementById("output").innerHTML = "Trail(s): " + results.join(", "); //Shows users their result