How to use checked radio button values in 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

Ken Lee · Accepted Answer · 2020-12-27 03:44:58Z

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>

answered Dec 27, 2020 at 3:44

Ken Lee

8,4153 gold badges14 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mo Miah Over a year ago

Hi thanks for the help, its actually working! Can I change the trigger1 to submitButton.addEventListener('click', function(){} ? Also what part of it is jQuery and how are you validating the codes? I'm not so sure how you did it but its working.

Ken Lee Over a year ago

This is the jquery include (at the top of the codes) : <script src="code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

Ken Lee Over a year ago

For validation, just check whether the data is null or empty and return false after an alert (warning) will be fine. see the codes inside the trigger1

Ken Lee Over a year ago

Yes you may change to submitButton.addEventListener, but I always think that using an onclick function is cleaner. Just a personal choice.

Mo Miah Over a year ago

Is this not how you write onclick? submitButton.addEventListener('click', function(){} How else would you write it?

|

Collectives™ on Stack Overflow

How to use checked radio button values in JavaScript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related