我一直收到这个错误。Uncaught TypeError: Cannot read property 'addEventListener' of null. 我看了其他有类似问题的帖子，但我想我对Javascript的理解水平还不够熟练，无法理解所给出的解决方案。谁能帮帮我？
下面是我的Javascript代码。
const multButton = document.getElementById('multiply');
const divideButton = document.getElementById('divide');
const firstNum = document.getElementById('firstNum')
const secondNum = document.getElementById('secondNum')
function multiplyNum(first, second){
const sum = first * second;
return alert(sum);
}
function divideNum(first, second){
const sum = first/second;
return alert(sum);
}
multButton.addEventListener('click', multiplyNum)
divideButton.addEventListener('click', divideNum)
这是我的HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Calculator
<div>
<form action="get">
1st Number: <input type="number" id="firstNum" name="firstNum"> <br>
2nd Number: <input type="number" id="secondNum" name="secondNum"> <br>
<button type="submit" id="multiply">Multiply</button>
<button type="submit" id="divide">Divide</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
这里发生的情况是，当你点击表单中的按钮时，它会调用表单中默认的 submit 方法。我把按钮移到了表单标签之外，这样就不会调用提交方法。因此，我们不会在提交时被重定向到另一个页面。之前我们被重定向了，这就是为什么dom元素不可用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
Calculator
<div>
<form action="get">
1st Number: <input type="number" id="firstNum" name="firstNum" /> <br />
2nd Number: <input type="number" id="secondNum" name="secondNum" />
<br />
</form>
<button id="multiply">Multiply</button>
<button id="divide">Divide</button>
</div>
<script src="script.js"></script>
</body>
</html>
脚本
const multButton = document.getElementById("multiply");
const divideButton = document.getElementById("divide");
const firstNum = document.getElementById("firstNum");
const secondNum = document.getElementById("secondNum");
function multiplyNum() {
const sum = firstNum.value * secondNum.value;
return alert(sum);
}
function divideNum() {
const sum = firstNum.value / secondNum.value;
return alert(sum);
}
multButton.addEventListener("click", multiplyNum);
divideButton.addEventListener("click", divideNum);
任何一种 multButton 是 null 因为带有 "id""multiply "的元素不存在，或者是 divideButton 是 null 因为带有 "id""divide "的元素不存在（或者两者都不存在）。
你贴出的代码没有问题（尽管在你的表单标签中应该是 method='get' 而不是 action='get').
下面是我运行的你的代码的修改版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Calculator
<div>
<form method='get'>
1st Number: <input type="number" id="firstNum" name="firstNum"> <br>
2nd Number: <input type="number" id="secondNum" name="secondNum"> <br>
<button type="submit" id="multiply">Multiply</button>
<button type="submit" id="divide">Divide</button>
</form>
</div>
<script>
const multButton = document.getElementById('multiply');
const divideButton = document.getElementById('divide');
const firstNum = document.getElementById('firstNum')
const secondNum = document.getElementById('secondNum')
multButton.addEventListener('click', function() {
alert('Multiply');
})
divideButton.addEventListener('click', function() {
alert('Divide');
})
</script>
</body>
</html>