I would like to use javascript to assign different url links to the button that is produced when radio button are activated

Question

I am new to using javascript and I am struggling with this set of radio buttons. What I would ultimately like to achieve is to have the images control the radio button (as they do) and populate different buttons with different links that lead to different product pages.

This is what I've come up with so far, but I can't figure out how to assign different urls because what I have is generating only one button with different labels.

Please help!

 function test() { var color = document.getElementsByName("place"); var found = 1; for (var i = 0; i < color.length; i++) { if (color[i].checked) { document.getElementById("choice1").value = color[i].value; found = 0; break; } else { found = 1; } } if (found == 1) { alert("Please Select Radio"); } } 

 .vertical{background-image:url(https://static1.squarespace.com/static/5a53e67ce5dd5b1bd751d9bb/t/5aa0294cc83025dd2277db31/1520445774361/ccpop_orientation5.jpg);} .horizontal{background-image:url(https://static1.squarespace.com/static/5a53e67ce5dd5b1bd751d9bb/t/5aa02946652dea43a4a1b63e/1520445768211/ccpop_orientation4.jpg);} .selector input{ margin:0;padding:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; } .selector-2 input{ position:absolute; z-index:999; } .selector-2 input:active +.orientation, .selector input:active +.orientation{opacity: .9;} .selector-2 input:checked +.orientation, .selector input:checked +.orientation{ -webkit-filter: none; -moz-filter: none; filter: none; } .orientation{ cursor:pointer; background-size:contain; background-repeat:no-repeat; display:inline-block; width:120px;height:80px; -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; transition: all 100ms ease-in; -webkit-filter: brightness(1.8) grayscale(1) opacity(.7); -moz-filter: brightness(1.8) grayscale(1) opacity(.7); filter: brightness(1.8) grayscale(1) opacity(.7); } .orientation:hover{ -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9); -moz-filter: brightness(1.2) grayscale(.5) opacity(.9); filter: brightness(1.2) grayscale(.5) opacity(.9); } /* Extras */ a:visited{color:#888} a{color:#444;text-decoration:none;} p{margin-bottom:.3em;} 

 <div class="selector"> <input id="vertical" type="radio" name="place" value="vertical" onclick="test()" style="border: none;"> <label class="orientation vertical" for="vertical"></label> <input id="horizontal" type="radio" name="place" value="horizontal" onclick="test()" style="border: none;" > <label class="orientation horizontal" for="horizontal"></label> </div> <br> <!-- BOTÃO DE CHECK --> <br> <input type="button" id="choice1"> 

Answer 1

When one of your radio buttons is clicked, this code will assign a value to the "choice1" button's data-url attribute.

When choice1 is clicked later, the url saved in its data-url attribute will be loaded into the current browser window.

 function test() { var color = document.getElementsByName("place"); var found = 1; var btn = document.getElementById("choice1"); for (var i = 0; i < color.length; i++) { if (color[i].checked) { btn.value = color[i].value; btn.dataset.url = "https://google.com/search?q=" + color[i].value; //btn.dataset.url = "/somepage?color=" + i + "&colorValue=" + color[i].value; found = 0; break; } else { found = 1; } } if (found == 1) { alert("Please Select Radio"); } } document.querySelector("#choice1").addEventListener('click', function () { if (this.dataset.url) window.location.href = this.dataset.url; }); 

 .vertical{background-image:url(https://static1.squarespace.com/static/5a53e67ce5dd5b1bd751d9bb/t/5aa0294cc83025dd2277db31/1520445774361/ccpop_orientation5.jpg);} .horizontal{background-image:url(https://static1.squarespace.com/static/5a53e67ce5dd5b1bd751d9bb/t/5aa02946652dea43a4a1b63e/1520445768211/ccpop_orientation4.jpg);} .selector input{ margin:0;padding:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; } .selector-2 input{ position:absolute; z-index:999; } .selector-2 input:active +.orientation, .selector input:active +.orientation{opacity: .9;} .selector-2 input:checked +.orientation, .selector input:checked +.orientation{ -webkit-filter: none; -moz-filter: none; filter: none; } .orientation{ cursor:pointer; background-size:contain; background-repeat:no-repeat; display:inline-block; width:120px;height:80px; -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; transition: all 100ms ease-in; -webkit-filter: brightness(1.8) grayscale(1) opacity(.7); -moz-filter: brightness(1.8) grayscale(1) opacity(.7); filter: brightness(1.8) grayscale(1) opacity(.7); } .orientation:hover{ -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9); -moz-filter: brightness(1.2) grayscale(.5) opacity(.9); filter: brightness(1.2) grayscale(.5) opacity(.9); } /* Extras */ a:visited{color:#888} a{color:#444;text-decoration:none;} p{margin-bottom:.3em;} 

 <div class="selector"> <input id="vertical" type="radio" name="place" value="vertical" onclick="test()" style="border: none;"> <label class="orientation vertical" for="vertical" onchange="window.location.replace('www.google.com')"></label> <input id="horizontal" type="radio" name="place" value="horizontal" onclick="test()" style="border: none;" > <label class="orientation horizontal" for="horizontal"></label> </div> <br> <!-- BOTÃO DE CHECK --> <br> <input type="button" id="choice1">