Значение HTML select передается в Javascript var (затем используется для получения JSON)
Я посмотрел на многие другие вопросы и ответы по стеку и не могу добраться туда, где мне нужно, чтобы мой код работал правильно. Я чувствую, что я пытаюсь сделать это просто, очевидно, не для меня.
У меня есть 2 отдельных раздела, каждый из которых дает различную информацию, которая необходима.
Первое - это OceanVal
секунда - это FishVal
Я хотел бы, чтобы значение, которое выбирает пользователь, затем отправлялось в мой javascript для использования в качестве переменных в следующем процессе при извлечении данных из файла JSON var и последующей отправке его обратно в мой HTML-код в oceanOutput (спасибо за вашу помощь ).
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OceanMeasure</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Ocean Measure</h1>
<div>
<p>Where will you be fishing?</p>
<form>
<select name="oceanVal" id="oceanVal">
<option value="" disabled="disabled" selected="selected">Please select</option>
<option value="gulf">Gulf</option>
<option value="atlantic">Atlantic</option>
</select>
</div>
<div>
<p>What fish would you like to look up?</p>
<select name="fishVal" id="fishVal">
<option value="" disabled="disabled" selected="selected">Please select</option>
<option value="dolphin">Dolphin</option>
<option value="blackfin tuna">Blackfin Tuna</option>
<option value="snook">Snook</option>
</select>
</div>
<button>Get Info</button>
</form>
<div id="oceanOutput"></div>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/data.json"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
JavaScript:
(function(){
// var userOcean = prompt("What ocean will you be fishing in?");
// var userFish = prompt("What fish would you like to look up?");
var userOcean = document.getElementById("oceanVal");
var userFish = document.getElementById("fishVal");
console.log(
"\n\nfish: "+jsonObject.ocean_measure[userOcean].fish[userFish].name+
"\n\nlength: "+jsonObject.ocean_measure[userOcean].fish[userFish].length+
"\n\nclosed: "+jsonObject.ocean_measure[userOcean].fish[userFish].closed+
"\n\nlimit: "+jsonObject.ocean_measure[userOcean].fish[userFish].limit+
"\n\nremarks: "+jsonObject.ocean_measure[userOcean].fish[userFish].remarks
);
})();
мои подсказки работают, но не мой HTML получает. так что если вы хотите увидеть, как он работает, просто сделайте подсказки, и это то, что я хочу, но с использованием моей формы при нажатии. и я еще не достиг выходной части.
(не уверен, если это необходимо, но вот мой JSON-я собираюсь минимизировать его.)
JSON:
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."}}}}}