Javascript 如何在不同的选择上使用不同的功能

这是我的第二个剧本。我同时在学习基础知识。我想在选择的不同选项上使用不同的功能

我尝试赋予不同的选项以值，以便稍后在开关所在的位置使用它。 它表示无法设置null的属性。如果有人能解释我做错了什么，那将是令人惊讶的。请原谅我愚蠢的错误，总共3天的学习，不幸的是，如果我不尝试，理论对我不起作用

每日卡路里摄入量



你的性别
男性的
女性

算计
var height=document.getElementById（'height'）.onclick；
var age=document.getElementById（'age'）.onclick；
var-weight=document.getElementById（'weight'）.onclick；
var性别=1；
函数计算（身高、年龄、体重、性别）{
开关（性别）{
病例性别：1
计算=66.5*（13.75*体重）+（5*身高）-（6.76*年龄）
个案性别:2
计算=655.1*（9.56*体重）+（1.85*身高）-（4.68*年龄）
打破
默认值：1
} 
document.getElementById（'calculate'）。innerHTML=calculate
}

我希望这有帮助，这段代码正在运行

var height=document.getElementById（'height'）；
var age=document.getElementById（'age'）；
var-weight=document.getElementById（'weight'）；
var boton=document.getElementById（'boton'）；
功能计算（身高、年龄、体重、性别）{
开关（性别）{
案例1：
var calculo=66.5*（13.75*体重）+（5*身高）-（6.76*年龄）；
打破
案例2：
var calculo=655.1*（9.56*体重）+（1.85*身高）-（4.68*年龄）；
打破
默认值：1
}
控制台日志（calculo）；
返回加尔各罗；
}
boton.addEventListener（'单击'，（）=>计算（身高、年龄、体重、1））
点击我
错误
未捕获类型错误：无法将属性“innerHTML”设置为null
表示您正在调用的
.innerHTML
对象不存在。在您的情况下，这是一行：

document.getElementById('calculate').innerHTML = calculate

得到这个错误是因为没有id为
calculate
的元素。如果没有该元素，则无法对其调用
.innerHTML

您还需要使用
.value
属性而不是
onclick
属性从表单字段中获取数据

见以下补充意见：



样本页
div{margin:1em；}/*在每个div前后添加垂直空格*/
每日卡路里摄入量
你的性别
男性的
女性的
算计
//使用JavaScript而不是HTML进行事件绑定
document.querySelector（“按钮”）.addEventListener（“单击”，计算）；
//获取所需元素的引用（而不是其onclick属性的值）
var height=document.getElementById（'height'）；
var age=document.getElementById（'age'）；
var-weight=document.getElementById（'weight'）；
var性别=1；
//您不需要任何参数，因为您已经有了对字段的引用
//数据在哪里。
函数calculate（）{
//声明将保存结果的变量，而不使用
//函数名作为变量名
设result=null；
开关（性别）{
//要从表单字段中获取数据，必须访问其.value属性
病例性别：1
结果=66.5*（13.75*体重值）+（5*身高值）-（6.76*年龄值）；
打破
个案性别:2
结果=655.1*（9.56*体重值）+（1.85*身高值）-（4.68*年龄值）；
打破
默认值：1
} 
//请确保引用了存在但未使用的元素
//.innerHTML，当字符串中没有HTML时。
document.getElementById（'output'）.textContent=result；
}
关于堆栈溢出的好答案应该不仅仅是发布有效的代码。它应该解释问题是什么以及您的解决方案是如何解决的。此外，您已经从代码中删除了
选择
，这是问题的全部要点。您好，谢谢您的帮助。我尝试将代码用于事件，但在单击按钮时会出现切口。它是否应该在单击后显示选项框？今天我将学习事件，但如果我想将按钮保留在身高、体重、年龄和保留选择下，该怎么办？我希望有一个最简单的示例，用户以不同的方式在函数中添加2个值，以生成不同的分数，具体取决于用户choice@Pawel，尝试按F12键在浏览器上进入开发模式，结果将通过控制台记录。但您可以将结果作为文本，只需添加另一个
，并在
计算
函数put
文档的
返回
行。getElementById（“结果”）。innerText=calculo