Valor de selección HTML pasado a Javascript var (luego usado para buscar JSON)

Question

Jul 23, 2016, 09:10 PM

Valor de selección HTML pasado a Javascript var (luego usado para buscar JSON)

He mirado muchas otras preguntas y respuestas de la pila y no puedo llegar a donde necesito estar para que mi código funcione correctamente. Siento que lo que intento hacer es simple, aparentemente no para mí.

Tengo 2 secciones selectas, cada una con información diferente que se necesita.

-primero es oceanVal

-segundo es fishVal

Me gustaría que el valor que seleccione el usuario se envíe a mi javascript para que se use como variables en el siguiente proceso para recuperar datos de un archivo var JSON y, finalmente, enviarlo de nuevo a mi HTML en el océano Salida (gracias por su ayuda )

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

})();

mis indicaciones funcionan pero no mi html. así que si quieres verlo funcionar, solo haz las indicaciones y eso es lo que quiero que haga, pero usando mi formulario cuando hagas clic. y aún no he llegado a la parte de salida.

(No estoy seguro de si es necesario, pero aquí está mi JSON: voy a minificarlo).

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