Javascript-帮助在卡路里计算器中显示计算结果

我是一名编程专业的一年级学生，如果这个问题看起来有点愚蠢，我很抱歉。 我创建了一个卡路里计算器，在显示最终结果时遇到了一个问题（他们需要摄入/释放多少卡路里才能达到他们想要的体重）。另外，我为内联CSS道歉，请忽略它。任何帮助都将不胜感激

编辑：添加了HTML、JS代码段（很抱歉！）。我仍然无法显示最终结果

//var-weight=document.getElementById（“weight”）.value；
函数getCalc（）{
var-weight=document.querySelector（'.weight'）；
//var height=document.getElementById（“height”）.value；
var height=document.querySelector（'.height'）；
//var age=document.getElementById（“age”）.value；
var age=document.querySelector（'.weight'）；
//var goalweight=document.getElementById（“goalweight”）.value；
var goalweight=document.querySelector（'.goalweight'）；
//var-gender=document.getElementById（“性别”）.value；
var-gender=document.querySelector（'.gender'）；
//var activity=document.getElementById（“activity”）.value；
var activity=document.querySelector（'.activity'）；
var BMR=“”；
var BMRGoal=“”；
var dailyCalories=“”；
var goalCalories=“”；
如果（性别=“男性”）{
BMR=66.47+（6.24*体重）+（12.7*身高）-（6.755*年龄）；
BMRGoal=66.47+（6.24*目标体重）+（12.7*身高）-（6.755*年龄）；
}否则{
BMR=655.1+（4.35*体重）+（4.7*身高）-（4.7*年龄）；
BMRGoal=66.47+（6.24*目标体重）+（12.7*身高）-（6.755*年龄）；
}
如果（活动=“无”）{
dailyCalories=BMR*1.2；
goalCalories=BMRGoal*1.2；
}else if（活动=='light'）{
dailyCalories=BMR*1.375；
goalCalories=BMRGoal*1.2；
}否则如果（活动=‘中等’）{
dailyCalories=BMR*1.55；
goalCalories=BMRGoal*1.2；
}否则，如果（活动=‘重’）{
dailyCalories=BMR*1.725；
goalCalories=BMRGoal*1.2；
}else if（活动=='xheavy'）{
dailyCalories=BMR*1.9；
goalCalories=BMRGoal*1.2；
}
document.getElementByClassName（'requireddailycals'）。innerHTML='您当前的每日卡路里摄入量为'+dailyCalories+'。为了达到您想要的体重目标，您需要将卡路里摄入量增加到'+goalCalories+'；
document.getElementById（“requireddailycals”）。值=每日日历（goalCalories）；
}

营养计算器
身体{
背景色：rgba（102143,74,0.3）；
}
a{
文字装饰：无；
}
.calcalc_盒{
位置：绝对位置；
保证金：自动；
顶部：35vh；
转化：translateY（-35%）；
左：50vw；
转化：translateX（-50%）；
边框：0.2vw实心#a6b727；
文本对齐：居中；
填充物：5vw；
字体系列：Arial；
盒影：0.5vw 0.5vh 0#a6b727；
}
.calcalc_box>h1{
字体系列：Lucida控制台；
颜色：#316886；
字体大小：3vw；
}
.calcalc_box>h2{
颜色：#a6b727；
保证金：5vh 0 5vh 0；
}
.calcalc_标志{
保证金：自动；
}
.calcalc_按钮{
背景色：#a6b727；
颜色：黑色；
填料：0.8vw；
字体大小：1.3vw；
字体大小：粗体；
边框：0.2vw实心#a6b727；
利润率：0.5vw；
显示：内联块；
边界半径：0.3vw；
}
.calcalc_按钮：悬停{
背景色：rgba（102143,74,0.3）；
}
标签{
显示：内联；
颜色：#a6b727；
字体大小：粗体；
}
.计算机{
边框：0.2vw实心#a6b727；
文本对齐：左对齐；
填料：0.5vw；
}
.U.科{
显示：内联块；
利润率：1vw 0 1vw 0；
宽度：100%；
}
.calculator_部分>标签{
字体大小：粗体；
填料：0.5vw；
}
.计算器输入{
填料：0.5vw；
利润底部：2vw；
}
calcalc_先生回来了{
颜色：#a6b727；
字体大小：粗体；
填充物：2vw；
}
Cal Calc
营养计算器
性别
男性
女性
年龄：

高度（英寸）：

重量（磅）：

目标权重：

活动水平
几乎没有运动
轻度运动（散步、跑步）
适度运动（运动）
剧烈运动（每天坚持常规）
超负荷运动（每天两次）



算计

在HTML中，您有：

<span class= "requireddailycals"/span>

或者更好，通过id获取元素

---

注意：尝试使用被剪断的JS/HTML/CSS，以便更轻松地运行代码。

我使用了

eventListener（）

和

preventDefault（）

。如果继续使用内联HTML事件属性，但不建议这样做，则还可以将

type=“button”

添加到计算按钮

我还更改了您的

查询选择器

，因为您试图通过

id

选择

元素

，并且使用

类

作为

选择器

您也有一个小的打字错误，这并没有破坏您的代码。 这将解决您的问题：

document.querySelector（'.calcalc_按钮'）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
var-weight=document.getElementById（'weight'）。值；
var height=document.getElementById（“height”）.value；
var age=document.getElementById（“age”）.value；
var goalweight=document.getElementById（“goalweight”）.value；
var-gender=document.getElementById（“性别”）.value；
var activity=document.getElementById（“activity”）.value；
var BMR=“”；
var BMRGoal=“”；
var dailyCalories=“”；
var goalCalories=“”；
如果（性别=“男性”）{
BMR=66.47+（6.24*体重）+（12.7*身高）-（6.755*年龄）；
BMRGoal=66.47+（6.24*目标体重）+（12.7*身高）-（6.755*年龄）；
}否则{
BMR=655.1+（4.35*体重）+（4.7*身高）-（4.7*年龄）；
BMRGoal=66.47+（6.24*目标体重）+（12.7*身高）-（6.755*年龄）；
}
如果（活动=“无”）{
dailyCalories=BMR*1.2；
goalCalories=BMRGoal*1.2；
}else if（活动=='light'）{
dailyCalories=BMR*1.375；
goalCalories=BMRGoal*1.2；
}否则如果（活动=‘中等’）{
dailyCalories=BMR*1.55；
goalCalories=BMRGoal*1.2；
<span class= "requireddailycals"></span>

document.getElementsByClassName("requireddailycals")[0].innerHTML = 'Your current daily calorie intake is ' + dailyCalories + '. In order to reach your desired weight goal, you will need to increase your caloric intake to ' + goalCalories + '.';