HTML select value passed into Javascript var (then used to fetch JSON)

前端未结

关注

 1  1731

逝去的感伤 2021-01-24 09:44

I have looked at many other stack q&a\'s and can\'t get to where I need to be to have my code work right. I feel what I am trying to do is simple, apparently not for me.<

1条回答

粉色の甜心 (楼主)

2021-01-24 10:12

You need to pass the selected option value not the object

Eg:

userOcean.options[userOcean.selectedIndex].value

(function(){

var jsonObject = {
  "ocean_measure": {
    "gulf": {
      "fish": {
        "dolphin": {
          "name": "Mahi-mahi",
          "length": "none",
          "limit": "10 per person or 60 per vessel whichever is less"
        },
        "blackfin tuna": {
          "name": "Blackfin Tuna",
          "length": "not regulated",
          "limit": "The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more"
        },
        "snook": {
          "name": "Snook",
          "length": "Not less than 28 inches total length (TL) or more than 33 inches TL",
          "closed": "Dec. 1-end of February; May 1-Aug. 31",
          "limit": "1 per harvester per day",
          "remarks": "Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait."
        }
      }
    },
    "atlantic": {
      "fish": {
        "dolphin": {
          "name": "Mahi-mahi",
          "length": "20 inches fork length",
          "limit": "10 per person or 60 per vessel whichever is less"
        },
        "blackfin tuna": {
          "name": "Blackfin Tuna",
          "length": "not Regulated",
          "limit": "The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more"
        },
        "snook": {
          "name": "Snook",
          "length": "Not less than 28 inches total length (TL) or more than 32 inches TL",
          "closed": "Dec. 15 to Jan. 31, June 1 to Aug. 31",
          "limit": "1 per harvester per day",
          "remarks": "Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait."
        }
      }
    }
  }
};

var userOcean = document.getElementById("oceanVal");
var userFish = document.getElementById("fishVal");
var buttonInfo = document.getElementById("getInfo");
var output = document.getElementById("oceanOutput");

buttonInfo.addEventListener('click', function() {
  var ocean = userOcean.options[userOcean.selectedIndex].value;
  var kind = userFish.options[userFish.selectedIndex].value;
  output.innerHTML = "Info:"+
    "Name: "+jsonObject.ocean_measure[ocean]['fish'][kind].name+""+
    "Length: "+jsonObject.ocean_measure[ocean]['fish'][kind].length+""+
    "Limit: "+jsonObject.ocean_measure[ocean]['fish'][kind].limit+"";
});
})();

       Ocean Measure
        
            Where will you be fishing?
            
                
            
            
                What fish would you like to look up?

0 讨论(0)