如何在JavaScript中使用选中的单选按钮值

Question

嗨，我正在尝试创建一个血液酒精含量计算器。我有一个性别倍增器，它需要根据它的无线电输入来改变它的值。因此，如果用户单击男性，则性别乘数需要为0.55，如果用户单击女性，则性别乘数为0.68

            <div class="viewport">
             <div class="gender-buttons" id="gender-buttons">
                <input class="gender-button" type="radio" name="tools" id="tool-1" value="0.55">
                <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>
             <div class="weight-input" >
                <h3>ENTER WEIGHT</h3>
                <input id="weight-input" type="number" placeholder="75kg" required>
             </div>
             <div class="alcohol-content" >
                <h3>AMOUNT OF DRINKS</h3>
                <input id="alcohol-content" type="number" placeholder="5" required>
             </div>
             <div class="alcohol-type">
                <h3>TYPE OF DRINKS</h3>
                <select name="type-of-alcohol" id="alcohol-type">
                    <option value="1">Shots of Spirits</option>
                    <option value="1">Glasses of Wine</option>
                    <option value="1">Pints of Beer</option>
                </select>
             </div>
             <div class="elapsed-time">
                <h3>ELAPSED TIME</h3>
                <input id = "elapsed-time" type="number" placeholder="2 hours ago" required>
             </div>
             <div class="submit-button" >
                <input type="submit" id="submit-button">
             </div>
             <div class="result-container" id="result-container">
                <h5>YOUR BAC IS</h5>
             </div>
          </div>

let weightElement = document.getElementById("weight-input");         
let amountElement = document.getElementById("alcohol-content");      
let submitButton = document.getElementById("submit-button");          
const alcoholTypeElement = document.getElementById("alcohol-type");   
const elapsedTimeElement = document.getElementById("elapsed-time");

这是单选按钮的变量

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


//Function to calculate BAC 

submitButton.addEventListener('click', function(){  
             
const weight = parseInt(weightElement.value);                    
const amount = parseInt(amountElement.value);                    
const alcoholType = parseFloat(alcoholTypeElement.value);        
const gramsOfAlcohol = (alcoholType*amount)*14;  

该函数中的新变量采用genderButtonElement的值，并将在下面的bloodAlcoholContent变量中使用的值设置为parseFloat

const genderButton = parseFloat(genderButtonElement.value);
const bloodAlcoholContent = (gramsOfAlcohol / ((weight * 1000) * genderButton))*100;

const elapsedTime = parseInt(elapsedTimeElement.value) * 0.015;
const finalBac = bloodAlcoholContent - elapsedTime;
document.getElementById("result-container").innerHTML = 
finalBac.toFixed(2) + " " + "BAC";


})

chrome控制台上的问题是“未捕获类型错误，无法读取‘null’的属性”，并且在计算bloodAlcoholContent时没有使用genderButton (来自无线电的输入)的答案

谢谢

Answer 1

请(1)添加jquery，(2)添加验证码。请尝试以下代码：

(作为演示，我还更改了与“饮料类型”相关的值)。

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
  
  
  <div class="viewport">
             <div class="gender-buttons" id="gender-buttons">
                <input class="gender-button" type="radio" name="tools" id="tool-1" value="0.55">
                <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>
             <div class="weight-inputx" >
                <h3>ENTER WEIGHT</h3>
                <input id="weight-input" type="number" placeholder="75kg" required>
             </div>
             <div class="alcohol-contentx" >
                <h3>AMOUNT OF DRINKS</h3>
                <input id="alcohol-content" type="number" placeholder="5" required>
             </div>
             <div class="alcohol-type">
                <h3>TYPE OF DRINKS</h3>
                <select name="type-of-alcohol" id="alcohol-type">
                    <option value="1">Shots of Spirits</option>
                    <option value="2">Glasses of Wine</option>
                    <option value="3">Pints of Beer</option>
                </select>
             </div>
             <div class="elapsed-time">
                <h3>ELAPSED TIME</h3>
                <input id = "elapsed-time" type="number" placeholder="2 hours ago" required>
             </div>
             <div class="submit-button" >
                <input type="submit" id="submit-button" onclick="javascript:trigger1();">
             </div>
             <div class="result-container" id="result-container">
                <h5>YOUR BAC IS</h5>
             </div>
          </div>

<script>


//Function to calculate BAC 

function trigger1()
{    



let weightElement = document.getElementById("weight-input");         
let amountElement = document.getElementById("alcohol-content");      
let submitButton = document.getElementById("submit-button").value;          
const alcoholTypeElement = document.getElementById("alcohol-type");   
const elapsedTimeElement = document.getElementById("elapsed-time");
const genderButtonElement = document.querySelector('input[name="tools"]:checked');         

if (genderButtonElement == null){
alert("Please choose the Gender"); return false;
}   

if (weightElement.value == ""){
alert("Please enter the weight"); return false;
}   

if (amountElement.value == ""){
alert("Please enter the Amount of Drinks"); return false;
}


if (elapsedTimeElement.value == ""){
alert("Please enter the Elapsed time"); return false;
}

const weight = parseInt(weightElement.value);                    




const amount = parseInt(amountElement.value);                    
const alcoholType = parseFloat(alcoholTypeElement.value);        
const gramsOfAlcohol = (alcoholType*amount)*14;  
const genderButton = parseFloat(genderButtonElement.value);
const bloodAlcoholContent = (gramsOfAlcohol / ((weight * 1000) * genderButton))*100;
const elapsedTime = parseInt(elapsedTimeElement.value) * 0.015;
const finalBac = bloodAlcoholContent - elapsedTime;

document.getElementById("result-container").innerHTML = finalBac.toFixed(2) + " " + "BAC";           
}

</script>