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

Question

我有一个名为genderMultiplier的变量，它在此计算中使用

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

我的genderMultiplier可以有2个值，我在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);

一个单选按钮是公的和母的。因此，如果用户单击Male，则genderMultiplier为0.55；如果用户单击Female，则genderMultiplier为0.68

对此有什么建议吗？

Answer 1

将最后一行更改为

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>

​

在您的示例中，执行此操作的纯Javascript方法如下：

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

如果你使用的是JQuery，你可以这样获取：

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

Answer 3

要计算bloodAlcoholContent，您需要知道值gramsOfAlcohol和weight。但是您没有展示计算这些变量的方法。

​

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>

​