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

Question

Hi I am trying to create a Blood Alcohol Content calculator. I have a gender multiplier that needs to change its value depending on its radio input. So if the user clicks Male then the gender multiplier needs to be 0.55 and if the user click Female then the gender multiplier is 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");

This is the variable for the Radio button

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;  

The new variable inside the function takes the value of genderButtonElement and parseFloat the value to be used in the bloodAlcoholContent variable below

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";


})

The problem on the chrome console says "Uncaught Type error, cannot read property of 'null'" and doesnt use the answer of genderButton (the input from the radio) in the calculation for bloodAlcoholContent

Thanks

Answer 1

Please (1) add jquery and (2) add validation codes. Please try the following codes:

(I also changed the values associated with "type of drinks", as a demonstration).

<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>