如何从HTML中选择要在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>

//用于计算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变量。现在“酒精类型”有三种选择：烈酒、葡萄酒和啤酒。每个人都有自己的价值观。我试图在函数中加入“值”作为条件

我尝试创建一个如下所示的切换语句，以反映其酒精体积的值（例如烈酒为40%酒精，标准单位为1.5盎司，在上述变量中（const-gramsofalcool=（酒精类型*数量）*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克纯酒精

因此，如果用户选择葡萄酒，那么我们知道，一杯12%酒精含量的标准葡萄酒（5盎司）乘以14，将得到8.4克纯酒精

因此，如果用户选择啤酒，那么我们知道，一品脱（12盎司）酒精浓度为5%的标准酒乘以14，就会得到8.4克纯酒精

我希望这是有帮助的，我似乎找不到我的问题的具体问题，但本质上，我最终使用的选择需要在我的函数中使用之前预先计算

---

谢谢

您不需要函数，一个简单的对象/字典和键/值对就可以了。另外，您需要在解析酒精类型时使用parseFloat，而不是parseInt，因为它将1.5截断为1，这会产生一个bug。此外，我没有修复您的性别选择，因为我不明白它是如何工作的：

let weightElement=document.getElementById（“权重输入”）；//用户输入权重
让amountElement=document.getElementById（“酒精含量”）//消耗的饮料数量
让submitButton=document.getElementById（“提交按钮”）//提交计算
const alcoholTypeElement=document.getElementById（“酒精类型”）//以盎司为单位计量的酒精类型
submitButton.addEventListener（'click'，function（）{//用户单击Submit按钮将开始计算
const weight=parseInt（weightElement.value）；//weight将是weightElement输入的整数值
const amount=parseInt（amountElement.value）；//amount将是amountElement输入的整数值
//这里有一个bug-需要解析float，而不是parseInt
const algoltype=parseFloat（algoltypelement.value）；//algoltype将是algoltypelement的整数值
//这是具有键/值对的对象
常数类型={
12: 0.05,
5: 0.12,
1.5: 0.4
}
//在这里，您将酒精类型乘法器酒精类型[酒精类型]应用于数量
const gramsofalcool=（酒精类型[酒精类型]*数量）*14；//14是美国/英国每标准单位酒精克数的标准乘数
const genderMultiplyer=0.55；
常量血液酒精含量=（克酒精/（重量*1000）*性别多层））*100
document.getElementById（“结果容器”）.innerHTML=
血醇含量固定（2）；
})

男性
女性
输入重量
我有
属于
烈酒
一杯葡萄酒
品脱啤酒

问题出在哪里？您描述了您的解决方案，但有什么不起作用？@mo miah，请投票并接受我的答案，如果它对您有帮助的话：）嗨，Ivan，谢谢您的回答。我发现我必须将“AlgolType”更改为parseFloat值才能将其用作整数。但是，请查看您的const AlgolTypes代码={12:0.05,5:0.12,1.5:0.4}它是如何与原始酒精类型关联的？就像用户选择啤酒一样，啤酒的值（5%酒精含量为12盎司）如何使用（5%*12盎司）作为我计算BAC函数的一部分，您的HTML将根据预定义值返回1.5、5或12。AlgolTypes是一个基于键返回一些值的对象。例如，如果您请求键1.5，它将返回0.05，如果您请求5，它将返回0.12。我在下一行中使用它作为“AlgolTypes[AlgolType]，其中醇类为例如1.5，“醇类[1.5]'将得到0.05，然后乘以'amount'变量。基本上，AlcoolType是一种键/值对形式的数据结构，我使用它作为函数的一部分，因为在这里使用函数是一种过激的行为。如果AlcoolType是在数组中预定义的，JS将如何使用用户输入？如果用户选择“5杯威士忌”，则将是（5杯威士忌）*（1.5*14）*0.4）其中“5”是数量，“1.5”是盎司，“14”是克的标准乘数，“0.4”"酒精的百分比是一个标准单位吗？这就是为什么我认为最好把它放在一个根据用户输入抛出数据的函数中。想法？或者它可能是这样工作的？12是盎司，0.05是酒精在12盎司中的百分比，依此类推，所以如果用户选择其中一个，它将连接到其中一个我想是se键值？常量类型={12:12*0.05，5:5*0.12，1.5:1.5*0.4}

    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 

    }