使用javascript更改onclick值

Question

I'm pretty new to JS and maybe this is a very banal questions but I still can't figure out what's wrong. I have this simple html code:

<span>1</span>
<input id="check1" type="radio" value="a1"/>
<span>2</span>
<input id="check2" type="radio" value="b2"/>
<span>3</span>
<input id="check3" type="radio" value="c3"/>
<span>4</span>
<input id="check4" type="radio" value="a4"/>
<span>5</span>
<input id="check5" type="radio" value="b5"/>

<input id="red" type="button" value="Go" onclick=""/>

What i would like to achieve is, based on the radio checked change the onclick property. For example, if check1 and check2 are checked go to google.com, if check1 and check3 go to jsfiddle.net etcetera. So I wrote a simple Javascript:

window.onchange = function redirect(){

  if (document.getElementById('check1').checked && document.getElementById('check2').checked) {
    location.href='www.google.com';
    // document.getElementById('red').onclick="www.google.com"
  }

  else if (document.getElementById('check1').checked &&    document.getElementById('check3').checked) {
    location.href='www.jsfiddle.net';
    // document.getElementById('red').onclick="window.open('www.jsfiddle.net')"
  }
}

Here You can find a JS Fiddle. What I thought to do was to set the onclick property like I did with an image, using getElementById and then setting his source, so I wrote document.getElementById('red').onclick="window.open('random page')" but for some reason that I can't understand it doesn't work.

Questions:

1) As you can see in my code i wrote a location.href='address' that obviously doen't wait for the user to click the button, so that's not a solution, how can I make this work?

2)Is there a way to make this piece of code more scalable? What I mean is, in the future if I want to add another radio, I would have to modify manually the code and insert another else if, I thought about something like:

var radio = document.getElementByName('radio') //not sure if this is the right getElement
for (var i=1; i<radio.lenght; i++){
   if radio[i].checked{ //is this right?
      for (var n=i+1; n<radio.lenght; n++){
          if radio[n].checked{
             document.getElementById('red').onclick="window.open('random page')"
          }
       }
 }

Any suggestion to my code is welcome.

​

Answer 1

Try out this in JS Fiddle. It contains how you can listen the onclick event of a button and to get the checked value of a radio button.

HTML part:

    <form action="">
    <input type="radio" name="vehicle" value="Yes" id='yes'>Yes<br>
    <input type="radio" name="vehicle" value="No" id='no'>No
    </form>
    <input id="red" type="button" value="let's go"/>

JS part:

    document.getElementById('red').onclick = function() {
       if (document.getElementById('yes').checked) {
           alert('I have a Vehicle.');
       } else if(document.getElementById('no').checked) {
           alert('I don\'t have a Vehicle.');
       } else {
           alert('No answer.');
       }
   }

If you use radio buttons, and you want only one to be selectable to the user at a time you have to set the same name attribute to them.

You can also make use of the value property of radio buttons for storing the redirection URL.

Here is a more useful example for you.

HTML part:

    <form action="">
        <input type="radio" name='redirect' value='https://www.google.com/' id='google'>Google<br />
        <input type="radio" name='redirect' value='http://www.jsfiddle.net/' id='jsFiddle'>JS Fiddle<br />
        <input type="radio" name='redirect' value='https://www.facebook.com/' id='Facebook'>Facebook
    </form>

    <input id="red" type="button" value="let's go"/>

JS part:

    document.getElementById('red').onclick = function() {
       var options = document.getElementsByName('redirect'),
           length = options.length,
           i = 0;

       for (i; i < length; i++) {
           if (options[i].checked) {
               window.open(options[i].value);
           }
       }
    }

Answer 2

if (document.getElementById('check1').checked&&document.getElementById('check2').checked)
{
    document.getElementById('red').onclick=function(){
      window.location.href ='http://www.google.com';
     };
}

This code binds the function to the onclick event of element with id='red'. So add a bunch of such conditions and change the onclick binding whenever any radio button is checked/unchecked.