代码新手，遇到此错误"Uncaught TypeError: Cannot read property 'value' of null"

Question

我是新来的...就像全新的代码一样，我一直在做一个副项目，我可以逐步将我正在学习的东西融入我的课程中，以帮助内化。我已经触及了基本的HTML和JS，但还有很长的路要走。到目前为止，我的第一页是一个温度计算器，现在我正在学习一些 HTML，我想合并一个，因为我刚刚了解它们，而不是浏览器提示。但是，我在本节代码的标题中遇到了错误。

这是我正在使用的代码片段，它踢了我错误

//getElementById() Method testing
let userTempNumberRaw = ''
let celsius = ''
let fahrenheit = ''
let kelvin = ''
let newton = ''
let userTempUnit
let userTempNumber
// Checks the userinput for unit in the dropdown and chooses which caluclation function to call
function bigFunction(){
	userTempUnit = document.getElementById(tempUnit).value
	userTempNumberRaw = document.getElementById(tempNumber).value
	userTempNumber = parseFloat(userTempNumberRaw)
	switch (userTempUnit.toUpperCase()){
	case 'KELVIN':
		kelvinCalc(userTempNumber)
				break;
	case 'CELSIUS':
		celsiusCalc(userTempNumber)
		break;
	case 'FAHRENHEIT':
		fahrenheitCalc(userTempNumber)
		break;
	case 'NEWTON':
		newtonCalc(userTempNumber)
		break;
	}
}

<h2> Enter your conversion information bellow. Thank you.</h2>
<!-- This segment is the submition form whereupon submit button is pressed, values are passed to our calculation functions -->
<form onsubmit="bigFunction()" action = "" method = "DIALOG">
<br>
<label for="temp-number">Enter the value of the temperature you are trying to convert</label>
<br>
<input type="number" name="tempNumber" id = "tempNumber" step = "1">
<select id="tempUnit" name = "tempUnit">
<option value="kelvin">Kelvin</option>
<option value="celsius">Celsius</option>
<option value="fahrenheit">Fahrenheit</option>
<option value="newton">Newton</option>
<label for="tempUnit">unit</label>
</select>
<input type="submit" value="Submit">
</form>

具体来说，它告诉我，对于document.getElementByID(tempUnit(.value和document.getElementById(tempNumber(.value都是'value = null'

我对此的预期结果是，在按提交后，函数 bigFunction(( 将运行，从而将刚刚提交的值拉到

id="tempUnit"
and

id="tempNumber"

从两个输入字段并将它们分配给变量

userTempUnit
and

userTempNumberRaw.

我只是不明白为什么当他们已经提交值时会说值为空，并具有像开尔文这样的定义值。我需要以某种方式返回值吗？感谢您的帮助！

计算函数进一步向下。 如果我提交的信息太多或太少，我也很乐意回答问题。这是我的第一篇文章。

Answer 1

正如 Quentin 所评论的那样，JS 将 tempUnit 视为一个变量 - 当你使用document.getElementById()时，你需要向它传递一个与你的元素 id 匹配的字符串。 尝试：

userTempUnit = document.getElementById('tempUnit').value
userTempNumberRaw = document.getElementById('tempNumber').value

Answer 2

你没有定义这两个变量userTempUnit，userTempNumber。 将其定义为空。

let userTempUnit = '';
let userTempNumber = '';