javascript - using radio value in JS function to retrieve JSON data -
previously received great solutions little project i'm doing. i'm looking scale more need on hurdle. working site: http://oceanmeasure.info
previous posts were:
html select value passed javascript var (then used fetch json)
retrieve json data based on user selection/prompt
current not working code: https://jsfiddle.net/zt074c01/
the main process wanting learn how switch out drop down box ocean value radio buttons instead because 2 options. above added fiddle link below add main.js file because thats think error is.
(function(){ //------set variables var userocean = getradioval( document.getelementbyid('dataform'), 'oceanval' ); var userfish = document.getelementbyid("fishval"); var buttoninfo = document.getelementbyid("getinfo"); var output = document.getelementbyid("oceanoutput"); var btnlicensey = document.getelementbyid('licenseyes'); var btnlicensen = document.getelementbyid('licenseno'); var licenseoutput = document.getelementbyid("licenseoutput"); //------start function on click buttoninfo.addeventlistener('click', function() { var ocean = userocean.options[userocean.checked].value; var kind = userfish.options[userfish.selectedindex].value; var fishimg = jsonobject.ocean_measure[ocean]['fish'][kind].image; output.innerhtml = "<h2>fish on!</h2><div id=\"fishinfo\">"+ "<img src='" +fishimg+ "' />" + "<p>fish: "+jsonobject.ocean_measure[ocean]['fish'][kind].name+"</p>"+ "<p>length: "+jsonobject.ocean_measure[ocean]['fish'][kind].length+"</p>"+ "<p>closed: "+jsonobject.ocean_measure[ocean]['fish'][kind].closed+"</p>"+ "<p>limit: "+jsonobject.ocean_measure[ocean]['fish'][kind].limit+"</p>"+ "<p>remarks: "+jsonobject.ocean_measure[ocean]['fish'][kind].remarks+"</p>"; console.log( "<img src='" +fishimg+ "' />" + "\n\nfish: "+jsonobject.ocean_measure[ocean]['fish'][kind].name+ "\n\nlength: "+jsonobject.ocean_measure[ocean]['fish'][kind].length+ "\n\nclosed: "+jsonobject.ocean_measure[ocean]['fish'][kind].closed+ "\n\nlimit: "+jsonobject.ocean_measure[ocean]['fish'][kind].limit+ "\n\nremarks: "+jsonobject.ocean_measure[ocean]['fish'][kind].remarks+ "</div>" ); }); //------end info function //------start license function btnlicensey.addeventlistener('click', function(){ licenseoutput.innerhtml = "<h3>lets fish!</h3>"+ "<p>you're set go ahead , select coast you'll fishing, , target species.</p>" }); //------end yes license function btnlicensen.addeventlistener('click', function(){ licenseoutput.innerhtml = "<h3>uh oh!</h3>"+ "<p>let's make sure taken care of before hit open waters, remember piers & charters require pay access , 1 day fishing license may included in access, sure call , find out ahead of time.</p>"+ "<h4>get license</h4>"+"<p>if you'd rather not risk go ahead , visit <a href=http://myfwc.com/license/recreational/saltwater-fishing/ target=_blank>here</a> purchase best license you!</p>" }); //------end no license function //--------radio function function getradioval(form, name) { var val; // list of radio buttons specified name var radios = form.elements[name]; // loop through list of radio buttons (var i=0, len=radios.length; i<len; i++) { if ( radios[i].checked ) { // radio checked? val = radios[i].value; // if so, hold value in val break; // , break out of loop } } return val; // return value of checked radio or undefined if none checked } })();
html
<input type="radio" name="radioelement" id="radio1" value="option-a" checked> <input type="radio" name="radioelement" id="radio2" value="opption-b"> js
$('input[name="radioelement"].checked').val();
Comments
Post a Comment