在 JS 函数中使用单选值来检索 JSON 数据

Question

以前，我正在做的这个小项目收到了很好的解决方案。 现在我希望扩大规模，但我需要克服这个障碍。 工作地点：http://oceanmeasure.info

以前的帖子是：

HTML select value passed into Javascript var (then used to fetch JSON)

retrieve JSON data based on user selection/prompt

当前不工作的代码： https://jsfiddle.net/zt074c01/

我目前想要做的主要过程是学习如何将海洋价值的下拉框切换为单选按钮，因为它只有 2 个选项。上面我添加了一个小提琴链接，但下面我将只添加 main.js 文件，因为那是我认为错误所在的地方。

    (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 all set go ahead and select which coast you'll be fishing, and your target species.</p>"
});
//------end yes license function
btnLicenseN.addEventListener('click', function(){
licenseOutput.innerHTML = "<h3>Uh Oh!</h3>"+ "<p>Let's make sure you get that taken care of before you hit the open waters, remember some piers &amp charters require you to pay for access and a one day fishing license may be included in that access, be sure to call and find out ahead of time.</p>"+
"<h4>Get my License</h4>"+"<p>If you'd rather not risk it go ahead and visit <a href=http://myfwc.com/license/recreational/saltwater-fishing/ target=_blank>Here</a> to purchase the best license for you!</p>"
});
//------end no license function

//--------RADIO Function

function getRadioVal(form, name) {
    var val;
    // get list of radio buttons with specified name
    var radios = form.elements[name];

    // loop through list of radio buttons
    for (var i=0, len=radios.length; i<len; i++) {
        if ( radios[i].checked ) { // radio checked?
            val = radios[i].value; // if so, hold its value in val
            break; // and break out of for loop
        }
    }
    return val; // return value of checked radio or undefined if none checked
}


})();

Answer 1

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