How to select a specific user input from HTML to be used in Javascript

Question

Hi I am trying to build a BAC (Body Alcohol Content) calculator. All of the buttons are single inputs by the user except the "Alcohol Type" which has 3 selections. Check out the HTML below.

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

Here is my code for the JS.

//Inputs

   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

//Function to calculate 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);})

As you can see, all of the elements have been linked to their respective JS variables. Now the "Alcohol Type" has 3 selections, Spirits, Wine and Beer. Each with their own values. I'm trying to incorporate the "values" as conditionals in my function.

I have tried creating a switch statement like below to reflect the value at its alcohol volume (For example Spirits is 40% alcohol, and a standard unit is 1.5 ounces, and in the variable above (const gramsOfAlcohol = (alcoholType*amount)*14; where 14 is the standard multiplier to find grams of alcohol per ounce:

    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 

    }

}

So if the user selects spirits then we know that a standard shot (1.5 ounces) of spirit at 40% alcohol multiplied by 14 will give 8.4 grams of pure alcohol.

So if the user selects wine then we know that a standard glass (5 ounces) of wine at 12% alcohol multiplied by 14 will give 8.4 grams of pure alcohol.

So if the user selects beers then we know that a standard pint (12 ounces) of spirit at 5% alcohol multiplied by 14 will give 8.4 grams of pure alcohol.

I hope this is helpful, I can't seem to find a specific question to my problem but essentially, the selection I end up using needs to be pre-calculated before used in my function.

Thanks

What is the problem? You described your solution, but what exactly does not work? — IvanD
– IvanD, Commented Dec 21, 2020 at 2:43

IvanD · Accepted Answer · 2020-12-21 02:59:29Z

1

You do not really need a function there, a simple object/dictionary with key/value pairs would do. Also, you need to use parseFloat in parsing the alcohol type, not parseInt as it truncates 1.5 to 1, creating a bug. Also, I did not fix your gender selection as I do not understand how it works:

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>

answered Dec 21, 2020 at 2:59

IvanD

2,99320 silver badges33 bronze badges

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

9 Comments

IvanD Over a year ago

@mo-miah, please upvote and accept my answer if it helped you :)

Mo Miah Over a year ago

Hi Ivan, thanks for the answer. I see that I had to change the "alcoholType" to a parseFloat value to use it as an integer. However, looking at your code for const alcoholTypes = { 12: 0.05, 5: 0.12, 1.5: 0.4 } How is it linked to the to the original alcohol type? As in if the user selects beer, would the values of beer (5% alcohol at 12 ounces) how do I use the (5% * 12 ounces) as part of my function to calculate the BAC?

IvanD Over a year ago

Your HTML will return 1.5, 5, or 12 as per your predefined values. alcoholTypes is an object that returns some value based on a key. For example, if you ask for key 1.5, it will return 0.05, if you ask for 5 it will return 0.12. I use it in the next lines as 'alcoholTypes[alcoholType]', where alcoholType is for example 1.5, 'alcoholTypes[1.5]' will give you 0.05 which you multiply by the 'amount' variable. Basically, alcoholType is a data structure in a form of a key/value pairs that I use istead of a function, as using a function is an overkill here.

Mo Miah Over a year ago

How will JS use the user input if the alcoholType is predefined in an array? If the user selects "5" shots of whiskey" that will be (5*(1.5*14)*0.4) where "5" is the amount, "1.5" is ounces, "14" is the standard multiplier to grams and "0.4" is the percentage of alcohol in a standard unit? That's why I thought it would be better to put it in a function which throws out data according to the user input. Thoughts?

Mo Miah Over a year ago

Or maybe it might work like this? 12 is ounces and 0.05 is percentage of alcohol in 12 ounces and so on, so if the user selects one of those then it will connect to one of these key values I suppose? const alcoholTypes = { 12: 12*0.05, 5: 5*0.12, 1.5: 1.5*0.4 }

|

Collectives™ on Stack Overflow

How to select a specific user input from HTML to be used in Javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related