2016-07-23 8 views
1

Ich habe mir viele andere Stapel q & a's angeschaut und kann nicht dorthin kommen, wo ich sein muss, damit mein Code richtig funktioniert. Ich fühle, was ich versuche zu tun ist einfach, anscheinend nicht für mich.HTML-Select-Wert in Javascript übergeben var (dann verwendet, um JSON zu holen)

Ich habe 2 ausgewählte Abschnitte, die jeweils unterschiedliche Informationen liefern, die benötigt werden.

-ersten ist oceanVal

-zweiten fishVal ist

I den Wert möchte der Benutzer wählt, um dann zu meinem JavaScript gesendet werden als Variablen in dem folgenden Prozess aus einer JSON auf Abrufen von Daten verwendet werden soll var file und schicke es dann letztendlich an meine HTML im oceanOutput zurück (danke für deine 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 Anweisungen arbeiten, aber nicht meine html bekommt. Also, wenn Sie es sehen wollen, tun Sie einfach die Eingabeaufforderungen und das ist, was ich will, aber mit meinem Formular, wenn geklickt wird. und ich habe den Ausgabeteil noch nicht erreicht.

(nicht sicher, ob es nötig ist, aber hier ist meine JSON -Ich es minify gehen.)

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

Auch die JSON-Datei ist derzeit klein, obwohl ein if (Eingabe == Option) {Code ...} etc ... nicht ideal wäre, da ich die JSON-Datei nach oben bekommen werde 40+ Fische an jedem Golf und Atlantik. – Carl

Antwort

1

Sie benötigen

die gewählte Option Wert nicht das Objekt zu übergeben

ZB:

userOcean.options[userOcean.selectedIndex].value 

(function(){ 
 

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

 
var userOcean = document.getElementById("oceanVal"); 
 
var userFish = document.getElementById("fishVal"); 
 
var buttonInfo = document.getElementById("getInfo"); 
 
var output = document.getElementById("oceanOutput"); 
 

 
buttonInfo.addEventListener('click', function() { 
 
    var ocean = userOcean.options[userOcean.selectedIndex].value; 
 
    var kind = userFish.options[userFish.selectedIndex].value; 
 
    output.innerHTML = "<h1>Info:</h1>"+ 
 
    "<p>Name: "+jsonObject.ocean_measure[ocean]['fish'][kind].name+"</p>"+ 
 
    "<p>Length: "+jsonObject.ocean_measure[ocean]['fish'][kind].length+"</p>"+ 
 
    "<p>Limit: "+jsonObject.ocean_measure[ocean]['fish'][kind].limit+"</p>"; 
 
}); 
 
})();
 <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 id="getInfo">Get Info</button> 
 
     </form> 
 
     <div id="oceanOutput"></div>

+0

Also habe ich den Code behoben, und jedes Mal, wenn ich auf die Schaltfläche klicke, wird er ausgeführt, aber dann heißt es in der Konsole: Navigiert zu Datei: /// Benutzer/ /Desktop/portfolio1/oceanMeasure/index.html?oceanVal=gulf&fishVal= Snook Dann aktualisiert die Seite, Clearing-Konsole, und clearing die innereHTML, die wir getan haben, für die Ausgabe. – Carl

+0

in HTML Ich musste meine werden machen – Carl