How to give a change the value of a variable when radio button is checked?-CodePudding

I am currently trying to make a calculator using javascript and I have been able to add the what the user will input into textboxes and I am trying to change the value of a variable when a radio is checked. Is there any way to change the value of the variable when the ratio is checked?

Thanks in advance

let firstInput = document.querySelector('#firstInput');
let secondInput = document.querySelector('#secondInput');
let thirdInput = document.querySelector('#thirdInput');

let btnAdd = document.querySelector('button');
let result = document.querySelector('h1');

btnAdd.addEventListener('click', () =>{
  let total = parseFloat(firstInput.value)   parseFloat(secondInput.value)   
parseFloat(thirdInput.value)   parseInt(genderReflection);
  result.innerText = total.toFixed(3);    
});

window.onload = function(){
  var genderReflection  = {
    price: 5
  }
  var maleRelaxation  = document.getElementById('Male');
  Male.addEventListener('click' ,function(){
    genderReflection.price   =  parseFloat(maleRelaxation.value)
  })
}


<input type="number" id="firstInput">
<div id="calculator">
  <input type="radio" id="Male" name="gender" value="5">
  <label for="Male">Male</label>
  <input type="radio" id="Female" name="gender" value="-161">
  <label for="Female">Female</label>
</div>

<input type="number" id="secondInput">
<input type="number" id="thirdInput">
<button>ADD</button>
<h1>result</h1>

CodePudding user response：

You could add an onClick="function_name(amount)" onto the inputs. Where function name would add the variable to a (globally declared) list. From there, the logic is yours.

Edit

Ofcourse, adding an eventlistener and getting the attribute as specified in comment above would probably be better. Saves typing. ;)

CodePudding user response：

two errors:

1)place all the js code inside window.onload
2)to get the value out of genderReflection use generReflection.price

window.onload = function(){
let firstInput = document.querySelector('#firstInput');
let secondInput = document.querySelector('#secondInput');
let thirdInput = document.querySelector('#thirdInput');

let btnAdd = document.querySelector('button');
let result = document.querySelector('h1');

btnAdd.addEventListener('click', () =>{
  let total = parseFloat(firstInput.value)   parseFloat(secondInput.value)   
parseFloat(thirdInput.value)   parseInt(genderReflection.price);

  result.innerText = total.toFixed(3);    
});

  var genderReflection  = {
    price: 5
  }
  var maleRelaxation  = document.getElementById('Male');
  Male.addEventListener('click' ,function(){
    genderReflection.price   =  parseFloat(maleRelaxation.value)
  })
}

<input type="number" id="firstInput">
<div id="calculator">
  <input type="radio" id="Male" name="gender" value="15">
  <label for="Male">Male</label>
  <input type="radio" id="Female" name="gender" value="-161">
  <label for="Female">Female</label>
</div>

<input type="number" id="secondInput">
<input type="number" id="thirdInput">
<button>ADD</button>
<h1>result</h1>