Change an onclick value with javascript

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.

Matyas Matyas · Accepted Answer · 2012-12-29 20:13:29Z

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

edited Dec 29, 2012 at 20:13

answered Dec 29, 2012 at 19:34

Matyas Matyas

1413 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ende Neu Over a year ago

If I understand this correctly, onclick only accept function as value?

Matyas Matyas Over a year ago

This is how you add a listener to the click browser event on a button in JS. The function assigned to the onclick property will be executed when onclick fires.

Matyas Matyas Over a year ago

Your welcome. Note that I edited it and gave an example for the redirection part of your question.

Yash Singla · Accepted Answer · 2013-02-01 06:32:40Z

0

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.

edited Feb 1, 2013 at 6:32

answered Dec 29, 2012 at 19:15

Yash Singla

1447 bronze badges

4 Comments

John Dvorak Over a year ago

explanation? An explanation always helps to a better answer.

jb. Over a year ago

Really add some explanation.

Ende Neu Over a year ago

I guess the explanation is that onclick only accept function as parameters while I was just passing a string.

Yash Singla Over a year ago

Sorry, I have been inactive from some time. Anyways I have added the explanation, let me know if anything is still not clear.

Collectives™ on Stack Overflow

Change an onclick value with javascript

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related