Привет, я пытаюсь построить калькулятор 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 грамма чистого алкоголя.
Я надеюсь, что это полезно, я не могу найти конкретный вопрос для моей проблемы, но, по сути, выбор, который я в конечном итоге использую, должен быть предварительно рассчитан перед использованием в моей функции.
Спасибо
Вам действительно не нужна функция, подойдет простой объект/словарь с парами ключ/значение. Кроме того, вам нужно использовать 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, пожалуйста, проголосуйте и примите мой ответ, если он вам помог :)
Привет Иван, спасибо за ответ. Я вижу, что мне пришлось изменить «alcoholType» на значение parseFloat, чтобы использовать его как целое число. Однако, глядя на ваш код для const AlcoholTypes = {12: 0,05, 5: 0,12, 1,5: 0,4}, как он связан с исходным типом алкоголя? Например, если пользователь выбирает пиво, будут ли значения пива (5% алкоголя в 12 унциях) использовать (5% * 12 унций) как часть моей функции для расчета BAC?
Ваш 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 — это структура данных в виде пары ключ/значение, которую я использую вместо функции, так как использование функции здесь является излишним.
Как JS будет использовать пользовательский ввод, если AlcoholType предопределен в массиве? Если пользователь выбирает «5» порций виски», это будет (5*(1,5*14)*0,4), где «5» — количество, «1,5» — унции, «14» — стандартный множитель для граммов и « 0,4" - это процент алкоголя в стандартной единице? Вот почему я подумал, что было бы лучше поместить это в функцию, которая выдает данные в соответствии с вводом пользователя. Мысли?
А может это так работает? 12 — это унции, а 0,05 — это процентное содержание алкоголя в 12 унциях и так далее, поэтому, если пользователь выберет одно из них, то, я полагаю, оно подключится к одному из этих ключевых значений? const AlcoholTypes = {12: 12*0,05, 5: 5*0,12, 1,5: 1,5*0,4}
Вам придется самостоятельно определить логику вашего приложения :) Я только что предоставил вам синтаксис, который может помочь вам в наборе ключей/значений. Какие ключи и какие значения вы используете, зависит от вас.
Буду признателен, если вы проголосуете и примете мой ответ, если он вам помог :) Спасибо!
Привет Иван, последний вопрос. Влияет ли массив на ввод пользователей? я проголосовал за спасибо
Нет, вы не проголосовали и не приняли мой ответ :)
В чем проблема? Вы описали свое решение, но что именно не работает?