Как выбрать определенный пользовательский ввод из 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>

Вот мой код для 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 варианта: спиртные напитки, вино и пиво. Каждый со своими ценностями. Я пытаюсь включить «значения» в качестве условных выражений в свою функцию.

Я попытался создать оператор переключения, как показано ниже, чтобы отразить значение в его объеме алкоголя (например, спиртные напитки содержат 40% алкоголя, а стандартная единица измерения - 1,5 унции, а в переменной выше (const граммы алкоголя = (тип алкоголя * количество) * 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 

    }

}

Итак, если пользователь выбирает спиртные напитки, мы знаем, что стандартная порция (1,5 унции) спирта с содержанием алкоголя 40%, умноженная на 14, даст 8,4 грамма чистого спирта.

Итак, если пользователь выбирает вино, мы знаем, что стандартный стакан (5 унций) вина с содержанием алкоголя 12%, умноженный на 14, даст 8,4 грамма чистого алкоголя.

Итак, если пользователь выбирает пиво, мы знаем, что стандартная пинта (12 унций) спирта с содержанием алкоголя 5%, умноженная на 14, даст 8,4 грамма чистого алкоголя.

Я надеюсь, что это полезно, я не могу найти конкретный вопрос для моей проблемы, но, по сути, выбор, который я в конечном итоге использую, должен быть предварительно рассчитан перед использованием в моей функции.

Спасибо

В чем проблема? Вы описали свое решение, но что именно не работает?

IvanD 21.12.2020 03:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
248
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам действительно не нужна функция, подойдет простой объект/словарь с парами ключ/значение. Кроме того, вам нужно использовать 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>

@mo-miah, пожалуйста, проголосуйте и примите мой ответ, если он вам помог :)

IvanD 21.12.2020 04:21

Привет Иван, спасибо за ответ. Я вижу, что мне пришлось изменить «alcoholType» на значение parseFloat, чтобы использовать его как целое число. Однако, глядя на ваш код для const AlcoholTypes = {12: 0,05, 5: 0,12, 1,5: 0,4}, как он связан с исходным типом алкоголя? Например, если пользователь выбирает пиво, будут ли значения пива (5% алкоголя в 12 унциях) использовать (5% * 12 унций) как часть моей функции для расчета BAC?

Mo Miah 21.12.2020 04:57

Ваш HTML вернет 1,5, 5 или 12 в соответствии с вашими предопределенными значениями. AlcoholTypes — это объект, который возвращает некоторое значение на основе ключа. Например, если вы запросите ключ 1,5, он вернет 0,05, если вы запросите 5, он вернет 0,12. Я использую его в следующих строках как 'alcoholTypes[alcoholType]', где AlcoholType, например, равен 1,5, 'alcoholTypes[1.5]' дает вам 0,05, которое вы умножаете на переменную 'amount'. По сути, AlcoholType — это структура данных в виде пары ключ/значение, которую я использую вместо функции, так как использование функции здесь является излишним.

IvanD 21.12.2020 05:14

Как JS будет использовать пользовательский ввод, если AlcoholType предопределен в массиве? Если пользователь выбирает «5» порций виски», это будет (5*(1,5*14)*0,4), где «5» — количество, «1,5» — унции, «14» — стандартный множитель для граммов и « 0,4" - это процент алкоголя в стандартной единице? Вот почему я подумал, что было бы лучше поместить это в функцию, которая выдает данные в соответствии с вводом пользователя. Мысли?

Mo Miah 21.12.2020 05:53

А может это так работает? 12 — это унции, а 0,05 — это процентное содержание алкоголя в 12 унциях и так далее, поэтому, если пользователь выберет одно из них, то, я полагаю, оно подключится к одному из этих ключевых значений? const AlcoholTypes = {12: 12*0,05, 5: 5*0,12, 1,5: 1,5*0,4}

Mo Miah 21.12.2020 06:01

Вам придется самостоятельно определить логику вашего приложения :) Я только что предоставил вам синтаксис, который может помочь вам в наборе ключей/значений. Какие ключи и какие значения вы используете, зависит от вас.

IvanD 21.12.2020 06:34

Буду признателен, если вы проголосуете и примете мой ответ, если он вам помог :) Спасибо!

IvanD 21.12.2020 06:35

Привет Иван, последний вопрос. Влияет ли массив на ввод пользователей? я проголосовал за спасибо

Mo Miah 22.12.2020 04:29

Нет, вы не проголосовали и не приняли мой ответ :)

IvanD 22.12.2020 06:33

Другие вопросы по теме