How to pass a value based on the input value chosen on a radio button?

Question

I am trying to switch between two arrays to perform some calculations based on the choice from radio button. To do this, I have two radio buttons with common name property, and by default, I have No option checked on html.

<div class="control">
  <label for="Yes">
    <input id="Yes" name="ip" type="radio" value="Yes" />
    Yes
  </label>
  <label for="No">
    <input id="No" name="ip" type="radio" value="No"  checked />
    No
  </label>
</div>

I am passing array_one and when the user checks the Yes radio button, it needs to switch to array_two and use the values to calculate. How do I get this to work. What am I missing?

var array_one = [1,2,3,4,5,6];
var array_two = [2,3,4];
var age = 20;

var rates = array_one;

function calculate(){
    var outputA = rates[age-16] *  68000 / 1000;
   $('#ip').html("$" + outputA);
}


if($("input[name=ip]:checked").val() == 'Yes') {
  rates = array_two;
  console.log($("input[name=ip]:checked").val());  
  calculate();
}else{
 calculate();
}

I have provided the link to JSfiddle.

https://jsfiddle.net/p0um5v7e/9/

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt")
})

var array_one = [1, 2, 3, 4, 5, 6];
var array_two = [2, 3, 4];
var age = 20;

var rates = array_one;

function calculate() {
  var outputA = rates[age - 16] * 68000 / 1000;
  $('#ip').html("$" + outputA);
}


if ($("input[name=ip]:checked").val() == 'Yes') {
  rates = array_two;
  console.log($("input[name=ip]:checked").val());
  /* var array_one = [1,2,3,4,5,6];
  var array_two = [2,3,4];
  var age = 25; */

  banner.addClass("alt");
  calculate();
} else {
  calculate();
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>
<div class="control">
  <label for="Yes">
    <input id="Yes" name="ip" type="radio" value="Yes" />
    Yes
  </label>
  <label for="No">
    <input id="No" name="ip" type="radio" value="No"  checked />
    No
  </label>
</div>
<div id="ip">

</div>

Answer 1

You can try this code bellow:

I am changing some javascript code your previous code here

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt")
})

var array_one = [1, 2, 3, 4, 5, 6];
var array_two = [2, 3, 4];
var age = 20;

var rates = array_one;
calculate($("input[name=ip]:checked").val());

function calculate(val) {
  console.log(val);
  if(val=='yes'){
     //your action when yes
  }else {
     //your another action when no
  }
  
  var outputA = rates[age - 16] *( 68000 / 1000)
  $('#ip').html("$" + outputA);
}

$('[name="ip"]').on('change', function() {
   calculate($("input[name=ip]:checked").val());
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="banner-message">
  <p>Hello World</p>
  <button>Change color</button>
</div>
<div class="control">
  <label for="Yes">
    <input id="Yes" name="ip" type="radio" value="Yes" />
    Yes
  </label>
  <label for="No">
    <input id="No" name="ip" type="radio" value="No"  checked />
    No
  </label>
</div>
<div id="ip">

</div>

Answer 2

You need to listen to the change event of the radio buttons and trigger the recalculation. You can also move the radio button check inside that function.

Additionally, you need to add some kind of fallback in case age - 16 is a value outside of the index range of the array used (otherwise, it would result in "$NaN"). I assumed a value of 0 in this example, but you might need to adapt that to your needs.

var array_one = [1, 2, 3, 4, 5, 6];
var array_two = [2, 3, 4];
var age = 20;

function calculate() {
  var rates = $("input[name=ip]:checked").val() === 'Yes' ? array_one : array_two;
  var outputA = (rates[age - 16] || 0) * 68000 / 1000;
  $('#ip').html("$" + outputA);
}

$("input[name=ip]").on('change', function() {
  calculate();
});

calculate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control">
  <label for="Yes">
    <input id="Yes" name="ip" type="radio" value="Yes" />
    Yes
  </label>
  <label for="No">
    <input id="No" name="ip" type="radio" value="No"  checked />
    No
  </label>
</div>
<span id="ip"></span>