根据单选按钮更改变量的值

Question

I have a variable called genderMultiplier which is used in this calculation

const bloodAlcoholContent = (gramsOfAlcohol / ((weight * 1000) * genderMultiplyer))*100;

My genderMultiplier can have 2 values and I have made a radio input for that in HTML

<div class="gender-buttons" id="gender-buttons">
     <input class="gender-button" type="radio" name="tools" id="tool-1" value="0.55" checked>
     <label class="for-gender-button" for="tool-1">Male</label>
     <input class="gender-button" type="radio" name="tools" id="tool-2" value="0.68">
     <label class="for-gender-button" for="tool-2">Female</label>
</div>

const genderButtonElement = document.getElementById("gender-buttons")
const genderMultiplyer = parseFloat(genderButtonElement.input);

One radio button is [MALE] and [FEMALE]. So if the user clicks Male then I want the genderMultiplier to be 0.55 and if the user clicks Female then I want the genderMultiplier to be 0.68

Any advice on this?

Answer 1

Change your last line to

const genderMultiplier = parseFloat([...genderButtonElement.children].find(c=>c.checked).value)

Answer 2

 function getMultiplier() { const genderMultiplyer = parseFloat(document.querySelector('input[name="tools"]:checked').value); alert("The multiplier is: " + genderMultiplyer); }

 <div class="gender-buttons" id="gender-buttons"> <input class="gender-button" type="radio" name="tools" id="tool-1" value="0.55" checked> <label class="for-gender-button" for="tool-1">Male</label> <input class="gender-button" type="radio" name="tools" id="tool-2" value="0.68"> <label class="for-gender-button" for="tool-2">Female</label> </div> <button onclick="getMultiplier()">Get Multiplier</button>

The pure Javascript way of doing this in your example is as follows:

const genderMultiplyer = parseFloat(document.querySelector('input[name="tools"]:checked').value);

If your are using JQuery you can get it this way:

const genderMultiplyer = parseFloat($('input[name="tools"]:checked').val());

Answer 3

To calculate bloodAlcoholContent , you need to know the values gramsOfAlcohol and weight . But you did not show the method for calculating these variables.

 const genderButtonElement = document.querySelectorAll('.gender-buttons.gender-button'); genderButtonElement.forEach(function(current, index) { current.addEventListener('click', function() { const genderMultiplyer = parseFloat(current.value); console.log(genderMultiplyer); }); });

 <div class="gender-buttons" id="gender-buttons"> <input class="gender-button" type="radio" name="tools" id="tool-1" value="0.55" checked> <label class="for-gender-button" for="tool-1">Male</label> <input class="gender-button" type="radio" name="tools" id="tool-2" value="0.68"> <label class="for-gender-button" for="tool-2">Female</label> </div>