[英]How to select a specific user input from HTML to be used in Javascript
您好我正在嘗試構建一個 BAC(身體酒精含量)計算器。 除了具有 3 個選擇的“酒精類型”之外,所有按鈕都是用戶單獨輸入的。 查看下面的 HTML。
<div class="main-container">
<div class="viewport">
<div class="gender-buttons" id="gender-buttons">
<button class="male-button">MALE</button>
<button class="female-button">FEMALE</button>
</div>
<div class="weight-input" >
<h3>ENTER WEIGHT</h3>
<input id="weight-input" type="number" placeholder="75kg" required>
</div>
<div class="alcohol-content" >
<h3>I'VE HAD</h3>
<input id="alcohol-content" type="number" placeholder="5" required>
</div>
<div class="alcohol-type">
<h3>OF</h3>
<select name="type-of-alcohol" id="alcohol-type">
<option value="1.5">Shots of Spirits</option>
<option value="5">Glasses of Wine</option>
<option value="12">Pints of Beer</option>
</select>
</div>
<div class="submit-button" >
<input type="submit" id="submit-button">
</div>
<div class="result-container" id="result-container">
</div>
</div>
</div>
這是我的 JS 代碼。
//輸入
let weightElement = document.getElementById("weight-input"); // User enters weight
let amountElement = document.getElementById("alcohol-content") // Number of drinks consumed
let submitButton = document.getElementById("submit-button") // Submits calculation
const alcoholTypeElement = document.getElementById("alcohol-type") // Type of alcohol consumed with ounces as measurement of value
//計算BAC的函數
submitButton.addEventListener('click', function(){ // User clicks Submit button will start the calculation
const weight = parseInt(weightElement.value); // Weight will be the integer value of the weightElement input
const amount = parseInt(amountElement.value); // Amount will be the integer value of amountElement input
const alcoholType = parseInt(alcoholTypeElement.value); // AlcoholType will be the integer value of alcoholTypeElement
const gramsOfAlcohol = (alcoholType*amount)*14; // 14 is the standard multipler for US/UK for grams of alcohol/ per standard unit
const genderMultiplyer = 0.55;
const bloodAlcoholContent = (gramsOfAlcohol / ((weight * 1000) * genderMultiplyer))*100
document.getElementById("result-container").innerHTML =
bloodAlcoholContent.toFixed(2);})
如您所見,所有元素都已鏈接到它們各自的 JS 變量。 現在“酒精類型”有 3 個選擇,烈酒、葡萄酒和啤酒。 每個人都有自己的價值觀。 我正在嘗試將“值”作為條件合並到我的 function 中。
我已經嘗試創建一個如下所示的 switch 語句來反映其酒精量的值(例如,烈酒是 40% 酒精,標准單位是 1.5 盎司,並且在上面的變量中 (const GramOfAlcohol = (alcoholType*amount)*14 ; 其中 14 是計算每盎司酒精克數的標准乘數:
const alcoholTypeValue = (alcoholType) => {
switch(value){
case 12:
return value * 0.05 // 0.05 = 5% Alcohol (Beers)
break
case 5:
return value * 0.12 // 0.12 = 5% Alcohol (Wine)
break
case 1.5:
return value * 0.4 // 0.40 = 5% Alcohol (Spirits)
break
}
}
因此,如果用戶選擇烈酒,那么我們知道標准酒精含量為 40% 的烈酒(1.5 盎司)乘以 14 將得到 8.4 克純酒精。
因此,如果用戶選擇葡萄酒,那么我們知道標准杯(5 盎司)12% 酒精的葡萄酒乘以 14 將得到 8.4 克純酒精。
因此,如果用戶選擇啤酒,那么我們知道標准品脫(12 盎司)5% 酒精的烈酒乘以 14 將得到 8.4 克純酒精。
我希望這會有所幫助,我似乎找不到針對我的問題的具體問題,但基本上,我最終使用的選擇需要在用於我的 function 之前預先計算。
謝謝
你真的不需要一個 function ,一個帶有鍵/值對的簡單對象/字典就可以了。 此外,您需要使用 parseFloat 來解析酒精類型,而不是 parseInt,因為它會將 1.5 截斷為 1,從而產生錯誤。 另外,我沒有修復您的性別選擇,因為我不明白它是如何工作的:
let weightElement = document.getElementById("weight-input"); // User enters weight let amountElement = document.getElementById("alcohol-content") // Number of drinks consumed let submitButton = document.getElementById("submit-button") // Submits calculation const alcoholTypeElement = document.getElementById("alcohol-type") // Type of alcohol consumed with ounces as measurement of value submitButton.addEventListener('click', function() { // User clicks Submit button will start the calculation const weight = parseInt(weightElement.value); // Weight will be the integer value of the weightElement input const amount = parseInt(amountElement.value); // Amount will be the integer value of amountElement input // You had a bug here - need to parseFloat, not parseInt const alcoholType = parseFloat(alcoholTypeElement.value); // AlcoholType will be the integer value of alcoholTypeElement // This is your object with key/values pairs const alcoholTypes = { 12: 0.05, 5: 0.12, 1.5: 0.4 } // here you apply your alcohol type multiplicator alcoholTypes[alcoholType] to amount const gramsOfAlcohol = (alcoholTypes[alcoholType] * amount) * 14; // 14 is the standard multipler for US/UK for grams of alcohol/ per standard unit const genderMultiplyer = 0.55; const bloodAlcoholContent = (gramsOfAlcohol / ((weight * 1000) * genderMultiplyer)) * 100 document.getElementById("result-container").innerHTML = bloodAlcoholContent.toFixed(2); })
<div class="main-container"> <div class="viewport"> <div class="gender-buttons" id="gender-buttons"> <button class="male-button">MALE</button> <button class="female-button">FEMALE</button> </div> <div class="weight-input"> <h3>ENTER WEIGHT</h3> <input id="weight-input" type="number" placeholder="75kg" required> </div> <div class="alcohol-content"> <h3>I'VE HAD</h3> <input id="alcohol-content" type="number" placeholder="5" required> </div> <div class="alcohol-type"> <h3>OF</h3> <select name="type-of-alcohol" id="alcohol-type"> <option value="1.5">Shots of Spirits</option> <option value="5">Glasses of Wine</option> <option value="12">Pints of Beer</option> </select> </div> <div class="submit-button"> <input type="submit" id="submit-button"> </div> <div class="result-container" id="result-container"> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.