JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="txt" /><hr />
<input type="radio" name="test" value="a">a
<input type="radio" name="test" value="b">b
<input type="radio" name="test" value="c">c<br />
<input type="button" value="d" id="bt1">
<input type="button" value="a" id="bt2">
<input type="button" value="b" id="bt3">
CSS
input[type="radio"],
input[type="button"]
{
cursor: pointer;
}
JavaScript
var Myobj = {
txt : null,
key : ['a', 'b', 'c', 'd'],
key_s : {'a': 0, 'b': 1, 'c': 2, 'd': 3},
/*act : { BAD ----v
0: { name : 'a', fun : Myobj.fun_1},
1: { name : 'b', fun : Myobj.fun_2},
2: { name : 'c', fun : Myobj.fun_2},
3: { name : 'd', fun : Myobj.fun_3},
}, */
init : function() {
Myobj.txt = document.getElementById('txt');
Myobj.act = {
0: { name : 'a', fun : Myobj.fun_1},
1: { name : 'b', fun : Myobj.fun_2},
2: { name : 'c', fun : Myobj.fun_2},
3: { name : 'd', fun : Myobj.fun_3},
};
},
test : function(et) {
if (typeof et == 'undefined')
et = window.event;
if (typeof et == 'object')
et = et.target.value;
var key = (typeof et == 'string' ? Myobj.key_s[et] : et);
var name = Myobj.key[key];
Myobj.txt.value = name + ' : ' + key;
Myobj.act[key].fun();
},
fun_1 : function() {
Myobj.txt.value += ' fun 1';
},
fun_2 : function() {
Myobj.txt.value += ' fun 2';
},
fun_3 : function() {
Myobj.txt.value += ' fun 3';
}
};
Myobj.init();
var el = document.getElementsByTagName('input');
for (var i = 0; i < el.length; ++i)
if (el[i].type == 'radio')
el[i].onclick = Myobj.test;
document.getElementById('bt1').onclick = function() {Myobj.test(3);}
document.getElementById('bt2').onclick = function() {Myobj.test(0);}
document.getElementById('bt3').onclick = function() {Myobj.test('b');}