How to change the onclick event of a link using the onclick event of a radio button?

Question

I've been trying to figure this out for the past 3 hours or so but I can't find the answer anywhere. What I'm trying to do is change the onclick event of a link dynamically using the onclick event of a radio button. Is this even possible? My code looks something like this..

    <input type="radio" name="test" onclick="document.getElementById('submit').onclick='alert(\'Hello\');'">First<br/>
    <input type="radio" name="test" onclick="document.getElementById('submit').onclick='alert(\'Hi\');'">Second<br/>

<a id="submit" onclick="" href="index.html">Click Here</a>

Answer 1

try this :

<input type="radio" name="test" onclick="document.getElementById('submit').onclick=function(){alert('Hello');}">First<br/>
    <input type="radio" name="test" onclick="document.getElementById('submit').onclick=function(){alert('Hi');}">Second<br/>

<a id="submit" onclick="" href="index.html">Click Here</a>

fiddle: http://jsfiddle.net/kfpzY/

Answer 2

Try this,

<input type="radio" name="test" onclick="attachEventToLinkOnClick(myFuncion1)">First<br/>
<input type="radio" name="test" onclick="attachEventToLinkOnClick(myFuncion2)">Second<br/>

<a id="submit" onclick="" href="index.html">Click Here</a>

<script type="text/javascript">
    function attachEventToLinkOnClick(func){
        var link = document.getElementById("submit");
        link.onclick = fun;
    }

    function myFuncion1(){
       alert("hello");
    }
    function myFuncion2(){
       alert("hi");
    }

</script>

Answer 3

I recommend to to add a new script tag <script type="text/javascript"> after you wirte the <input> and <a> elements.

<input type="radio" name="test" onclick="changeFun(fun1)">First<br/>

<input type="radio" name="test" onclick="changeFun(fun2)">Second<br/>

<a id="submit" onclick="" href="index.html">Click Here</a>

Inside the script tag wirte the following:

<script type="text/javascript">

    var fun1 = function () {
       alert('Hello')
    }

    var fun2  = function () {
        alert('Hi')    
    }

    var changeFun = function (newFun) {
        document.getElementById('submit').onclick = newFun;
    }

</script>

Good Luck.

Answer 4

view this jsfiddle

http://jsfiddle.net/h_awk/98Gt8/

<input type="radio" name="test" class="test" />
<input type="radio" name="test" class="test" />

<a id="submit" href="javascript:void(0);">Click Here</a>

<script>
    function addEvent(elemClass, elemId, evt, index, cbFunc)
    {
        var elemClass = document.getElementsByClassName(elemClass),
            elemId = document.getElementById(elemId);

        if( elemClass[index] )
        {
            elemId.addEventListener(evt, cbFunc, false);
        }
    }

    function say(msg)
    {
        alert(msg);
    }

    addEvent('test', 'submit', 'click', 0, function(){say('hello');});
    addEvent('test', 'submit', 'click', 1, function(){say('hi');});
</script>

that should work but there is slight problem, bubbling, i shall try to fix that as you see how that is working..