更改<a> Depending on If User Selects &#34;Yes&#34; or &#34;No&#34;

Question

I have a short questionnaire and I want to send people that are 18 and over to 1 link, and people that are younger than 18 to another.

The first question (the only one that filters) is "Are you older than 18?" and depending if the user clicks yes or no, I want that to change the URL inside of href="...".

Here is the code I have so far:

<div id="Q1">
    	<div class="panel panel-default">
    		<div class="panel-heading">
    			<h3 class="panel-title">Question 1 of 3<span class="pull-right">
                  <script>document.write(lmonth + " " + date + ", " + year);</script></span></h3>
    		</div>
    		<div class="panel-body">
    			<h4>Are you older than 18?</h4>
    			<div class="radio Q1">
    				<label> <input type="radio">Yes.</label>
    			</div>
    			<div class="radio Q1">
    				<label> <input type="radio">No.</label>
    			</div>
    		</div>
    	</div>
    </div>
    
    
    
    <div id="wall">
       <h3>You Qualify!</h3>
       <a href="http://url-if-older-tha-18.com">Continue</a>
    </div>

I would like to do this with pure javascript and no jquery if possible

Answer 1

您可以通过更改其href属性来更改锚标记的URL：

<a id="link" href="http://google.com">link</a>

document.getElementById("link").href = "http://bing.com";

https://jsfiddle.net/gbsm0mhn/

Answer 2

这样的事情应该有效

<input type="radio" name="yes" value="yes" id="yes"> Yes<br>
<input type="radio" name="no" value="no" id="no"> No<br>

<a href="http://www.google.com" id="link">This is link</a> 

JS

let yesRadio = document.getElementById('yes');
let link = document.getElementById('link');

if(yesRadio.checked = true) {
  link.href = 'http://www.stackoverflow.com';
} else {
  return;
}

Answer 3

在eventListener事件上使用change触发器，然后找到带有:checked伪类的已检查无线电。我注释掉了第一个脚本块，因为它不是问题的一部分，并假设你有一部分正常运行。

详细信息在Snippet中进行了评论

段

＆＃13;

＆＃13;

<div id="Q1">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Question 1 of 3<span class="pull-right">
                  <!--<script>document.write(lmonth + " " + date + ", " + year);</script>--></span></h3>
    </div>
    
    <!--Changed div to form added id=Q1-->
    <!--
    Added name='rad' to each radio button, 
    this allows us to hook into both values.
    Added value='yes' and 'no'
    -->
    <form id='Q1' class="panel-body">
      <h4>Are you older than 18?</h4>
      <div class="radio Q1">
        <label>
          <input type="radio" name='rad' value='yes'>Yes.</label>
      </div>
      <div class="radio Q1">
        <label>
          <input type="radio" name='rad' value='no'>No.</label>
      </div>
    </form>
  </div>
</div>



<div id="wall">
  <h3>You Qualify!</h3>
  <a href="http://url-if-older-tha-18.com">Continue</a>
</div>
<script>
  // Reference the form
  var form = document.getElementById('Q1');
  
  // Register a change event on form which will trigger event handler: radioAnswer()
  form.addEventListener('change', radioAnswer, false);

  function radioAnswer() {
    // Reference anchor
    var link = document.querySelector('#wall > a');
    // Reference the VALUE of the checked radio button
    var rad = form.querySelector("input[name=rad]:checked").value;
    // If VALUE is 'yes' change anchor href to example.com otherwise domain.com
    if (rad === 'yes') {
      link.href = 'http://example.com';
    } else {
      link.href = 'http://domain.com';
    }
  }
</script>

＆＃13;

＆＃13;

＆＃13;