Valor de seleção HTML passado para o Javascript var (usado para buscar JSON)

Question

Jul 23, 2016, 09:10 PM

Valor de seleção HTML passado para o Javascript var (usado para buscar JSON)

Eu olhei para muitas outras perguntas e respostas da pilha e não consigo chegar onde preciso para que meu código funcione corretamente. Sinto que o que estou tentando fazer é simples, aparentemente não para mim.

Eu tenho 2 seções selecionadas, cada uma produzindo informações diferentes que são necessárias.

-Primeiro é oceanVal

-second is fishVal

Gostaria que o valor que o usuário selecionasse fosse enviado ao meu javascript para ser usado como variáveis no processo a seguir na busca de dados de um arquivo JSON var e, em seguida, enviando-o de volta ao meu HTML no oceanOutput (obrigado por sua ajuda )

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

})();

meus prompts funcionam, mas não meu html recebe. portanto, se você quiser vê-lo funcionar, basta fazer as solicitações e é isso que eu quero, mas com o uso do meu formulário ao clicar. e ainda não cheguei à parte da saída.

(não tenho certeza se é necessário, mas aqui está o meu JSON - vou reduzi-lo.)

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