如何在 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;  

function里面的新變量取genderButtonElement的值，parseFloat取下面的bloodAlcoholContent變量要使用的值

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>