This calorie calculator is ignoring all the input boxes, and the button only works once. I’m using the formula:
calories = weight * MET * distance
Speed is supposed to affect MET, but it doesn’t seem to. Also, the button becomes unresponsive after one click. Here’s all the JavaScript I’m using:
document.getElementById("distance");
document.getElementById("speed");
document.getElementById("Calories");
document.getElementById("submit");
document.getElementById('weight');
const weightInput = document.getElementById('weight');
const distanceInput = document.getElementById("distance");
const speedInput = document.getElementById("speed");
const caloriesInput = document.getElementById('Calories');
const submitButton = document.getElementById('submit');
const weightValue = (weightInput) => {
return parseFloat(weightInput.value);
}
const distanceValue = (distanceInput) => {
return parseFloat(distanceInput.value);
};
const speedValue = (speedInput) => {
return parseFloat(speedInput.value);
};
function getMet(exerciseType) {
let multiplier;
switch (exerciseType.toLowerCase()) {
case 'walking':
multiplier = 3.5;
break;
case 'running':
multiplier = 7.0;
break;
case 'biking':
multiplier = 6.8;
break;
case 'swimming':
multiplier = 5.8;
break;
default:
multiplier = 4.0;
}
return multiplier;
}
function computeCal(weight, met, distance) {
return weight * met * distance;
}
const clicking = (event) => {
event.preventDefault();
const distance = distanceValue(distanceInput);
const speed = speedValue(speedInput);
const weight = weightValue(weightInput);
const exercise = document.getElementById("exercise-type").textContent;
console.log("Distance:", distance);
console.log("Speed:", speed);
console.log("Exercise Type:", exercise);
const met = getMet(exercise);
const calories = computeCal(weight, met, distance);
caloriesInput.textContent = `Calories Burned : ${calories.toFixed(2)}`;
}
submitButton.addEventListener("click", clicking);
