HTML-Auswahlwert, der an Javascript var übergeben wird (wird dann zum Abrufen von JSON verwendet)

Question

Jul 23, 2016, 09:10 PM

HTML-Auswahlwert, der an Javascript var übergeben wird (wird dann zum Abrufen von JSON verwendet)

Ich habe mir viele andere Stapel-Fragen und Antworten angesehen und komme nicht dahin, wo ich sein muss, damit mein Code richtig funktioniert. Ich habe das Gefühl, dass das, was ich versuche, einfach ist, anscheinend nicht für mich.

Ich habe 2 ausgewählte Abschnitte, von denen jeder unterschiedliche Informationen liefert, die benötigt werden.

-erst ist oceanVal

-sekunde ist fishVal

Ich möchte, dass der vom Benutzer ausgewählte Wert, der an mein Javascript gesendet wird, als Variable für den folgenden Vorgang zum Abrufen von Daten aus einer JSON - Var - Datei verwendet und anschließend an mein HTML im oceanOutput zurückgesendet wird (vielen Dank für Ihre Unterstützung Hilfe)

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
);

})();

Meine Eingabeaufforderungen funktionieren aber nicht mein HTML bekommt. Wenn Sie also sehen möchten, dass es funktioniert, führen Sie einfach die Eingabeaufforderungen aus, und genau das möchte ich, dass es mein Formular verwendet, wenn Sie darauf klicken. und ich habe den Ausgabeteil noch nicht erreicht.

(nicht sicher, ob es benötigt wird, aber hier ist mein JSON -Ich werde es minimieren.)

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."}}}}}