Question

我是javascript的新手，我现在有一个问题。我们如何通过单选按钮引用一个功能？我有国家名单，这个清单包括人口，面积和密度。当我选择单选按钮“区域”时，我想在我的脚本中添加单选按钮，此功能返回到另一个功能，并从其他功能中提取国家/地区。我已经编写了这些函数，但它只适用于区域。我需要在这个脚本中添加3个单选按钮
当我选择例如密度按钮时，它指的是这个函数并提取这些国家的密度，然后第二个函数将改变颜色。请帮帮我

var myCantons = []; 
myCantons[0] = ["Name Country","area km²","density",Population];
myCantons[102] = ["Germany",221.90,2696,117];
myCantons[106] = ["Italy",271.50,6510,485];
myCantons[107] = ["Denmark",141.31,2661,406];
myCantons[122] = ["Poland",286.25,3331,237];
myCantons[130] = ["Russia",124.49,5099,431];

 function myInit(){
   for(var i = 100; i < myCantons.length; i++){
    if(typeof myCantons[i] != 'undefined'){
        var myDensity = myCantons[i][2] ;
    var myNewColor = '';
    if(myDensity < 110){
         myNewColor = 'yellow';
         } else if (myDensity > 250){
           myNewColor = 'red';
         } else {
           myNewColor = 'orange';
         }
     var mySvgId ='myCantonId'+(''+i).substr(1);
     document.getElementById(mySvgId).setAttributeNS(null,'fill',myNewColor);
         }
      }
}

Answer 1

您可能希望查看DOM事件。

var handleChange = function (e) {
    if(e.target.checked) {
        // do something if the checkbox was selected
    } else {
        // do something if the checkbox was deselected
    }
}

document.getElementById("myCheckbox").addEventlistener("change", handleChange, false);

您可以将更改事件附加到任何输入元素并监视其状态。对于checked属性的复选框/单选按钮。如果选择了输入，则为真。

Answer 2

我们可以放三个单选按钮

<input type="radio" name="group1" id="area" value="area" onClick="myInit(this)"/>
<input type="radio" name="group1" id="density" value="density" onClick="myInit(this)" />
<input type="radio" name="group1" id="population" value="population" onClick="myInit(this)"/>

myInit函数将被修改如下以获取单选按钮对象的参数。

myInit(myradio)
{

    if(myradio.checked == true && myradio.value=='area')
        //Here logic for returning area will come

    else if(myradio.checked == true && myradio.value=='density')
        //Here logic for returning density will come

    else if(myradio.checked == true && myradio.value=='population')
        //Here logic for returning population will come
}

通过使用单选按钮引用另一个功能

2 个答案: