我已经查看了许多其他堆栈问答,但无法到达我需要让我的代码正常工作的地方。
我觉得我想做的事情很简单,显然不适合我。
我有两个选择部分,每个部分产生所需的不同信息。
-首先是 oceanVal
-第二个是fishVal
我希望用户选择的值发送到我的 javascript,在以下从 JSON var 文件获取数据的过程中用作变量,然后最终将其发送回 oceanOutput 中的 HTML(感谢您的帮助) )。
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."}}}}}