如何为该Java脚本单选添加第二个链接？

Question

I cant figure out how to insert the second link. I'd like each radio button to direct to a different link.

 <script> function myFunction() { if(document.getElementById('slide1').checked) { document.getElementById('myLink').href = "https://www.nationsprint.com/clients/ccpopv2/catalog.cgi"; } } </script> 

 <input checked="" type="radio" name="slider" id="slide1"> <input type="radio" name="slider" id="slide2" > <a href="" onclick='myFunction()' id="myLink">MyLink</a> 

Answer 1

Radio buttons support different values. You can use this to set them the url you want them to redirect to.

<input type="radio" name="slider" id="slide2" value="https://www.nationsprint.com/clients/ccpopv2/catalog.cgi">

Then, you can use document.querySelector to get the selected radio.

var link = document.querySelector('input[name="slider"]:checked').value

Here's a snippet showing how it works:

 function myFunction() { var link = document.querySelector('input[name="slider"]:checked').value document.getElementById('myLink').href = link; } 

 <input checked="checked" type="radio" name="slider" id="slide1" value="https://stackoverflow.com/"> <input type="radio" name="slider" id="slide2" value="https://www.nationsprint.com/clients/ccpopv2/catalog.cgi"> <a href="" onclick='myFunction()' id="myLink">MyLink</a> 

Answer 2

You can't add multiple href s to one element. If I understand you correctly, you want to change href based on selected radio input. Here it is:

 function myFunction() { if (document.getElementById('slide1').checked) { document.getElementById('myLink').href = "https://www.nationsprint.com/clients/ccpopv2/catalog.cgi"; } else if (document.getElementById('slide2').checked) { document.getElementById('myLink').href = "https://stackoverflow.com/"; } alert("Current 'href' is: " + document.getElementById('myLink').href); } 

 <input checked="" type="radio" name="slider" id="slide1"> <input type="radio" name="slider" id="slide2" > <a href="" onclick='myFunction()' id="myLink">MyLink</a> 

Answer 3

You should set the href as 'javascript:void(0)',to prevent the tag's default action.

  function myFunction() { var slide1=document.getElementById('slide1'); var slide2=document.getElementById('slide2'); var myLink=document.getElementById('myLink'); if(slide1.checked) { myLink.href = "https://www.nationsprint.com/clients/ccpopv2/catalog.cgi"; } if(slide2.checked) { myLink.href = "https://stackoverflow.com/"; } } 

 <input checked="" type="radio" name="slider" id="slide1"> <input type="radio" name="slider" id="slide2" > <a href="javascript:void(0)" onclick='myFunction()' id="myLink" >MyLink</a>