新代码，遇到此错误“未捕获的类型错误：无法读取 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"
和
id="tempNumber"

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

userTempUnit
和
userTempNumberRaw。

我只是不明白为什么当他们已经提交值时它会说 value 为 null ，并且定义了像 Kelvin 这样的值。我需要以某种方式返回值吗？感谢您的帮助！

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

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 = '';